30 seconds of CSS

Visual

Click on a snippet's name to view its code.

:not selector

The :not psuedo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.

Demo
  • One
  • Two
  • Three
  • Four

View snippet

Circle

Creates a circle shape with pure CSS.

Demo

View snippet

Counter

Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.

Demo
  • List item
  • List item
  • List item
    • List item
    • List item
    • List item

View snippet

Custom scrollbar

Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.

Demo

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?

View snippet

Custom text selection

Changes the styling of text selection.

Demo

Select some of this text.

View snippet

Dynamic shadow

Creates a shadow similar to box-shadow but based on the colors of the element itself.

Demo

View snippet

Etched text

Creates an effect where text appears to be "etched" or engraved into the background.

Demo

I appear etched into the background.

View snippet

Focus Within

Changes the appearance of a form if any of its children are focused.

Demo

View snippet

Fullscreen

The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.

Demo

Click the button below to enter the element into fullscreen mode.

I change color in fullscreen mode!


View snippet

Gradient text

Gives text a gradient color.

Demo

Gradient text

View snippet

Hairline border

Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.

Demo
text

View snippet

Mouse cursor gradient tracking

A hover effect where the gradient follows the mouse cursor.

Credit: Tobias Reich

Demo

View snippet

Overflow scroll gradient

Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.

Demo
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?

View snippet

Pretty text underline

A nicer alternative to text-decoration: underline or <u></u> where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.

Demo

Pretty text underline without clipping descending letters.

View snippet

Reset all styles

Resets all styles to default values with one property. This will not affect direction and unicode-bidi properties.

Demo
Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

View snippet

Shape separator

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

Demo

View snippet

System font stack

Uses the native font of the operating system to get close to a native app feel.

Demo

This text uses the system font.

View snippet

Toggle switch

Creates a toggle switch with CSS only.

Demo

View snippet

Triangle

Creates a triangle shape with pure CSS.

Demo

View snippet

Zebra striped list

Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.

Demo
  • Item 01
  • Item 02
  • Item 03
  • Item 04
  • Item 05

View snippet