hundred-styles.css Demo

A showcase of 100+ utility and component styles by Mathsite

Typography & Text

Heading h1

Heading h2

Heading h3

This is a bold and italic paragraph.

This paragraph is centered.

This paragraph glows!

This is a link
Buttons
Cards & Containers
Card Header

This is a card body. It uses box-shadow and rounded corners.

Card Footer
Light Card
Footer
Dark Card
Footer (dark)
Forms
Lists & Tables
  1. Ordered list item 1
  2. Ordered list item 2
Name Score
Mathsite 100
Demo User 90
Images & Media
Avatar Kitten
icon
Media object
This is a flexible media layout for avatars, icons, and descriptions.
Animations & Effects
I fade in
I slide down
I pop in!
Hover to zoom
Hover for shadow
Flex & Grid
Flex 1
Flex 2
Flex 3
Grid 1
Grid 2
Utilities & Helpers
No margin, no padding
Margin top, padding top, block, full width
Centered block
Pointer on hover You shouldn't see this text
Custom & Fun
🌈 Rainbow Text! Blurred text Glowing text Rotated Skewed Shadow pop
Gradient border!
★