30 seconds of CSS
Click on a snippet's name to view its code.
:not psuedo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.
Creates a circle shape with pure CSS.
Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
Changes the styling of text selection.
Creates a shadow similar to
box-shadow but based on the colors of the element itself.
Creates an effect where text appears to be "etched" or engraved into the background.
Changes the appearance of a form if any of its children are focused.
The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.
Gives text a gradient color.
Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.
A hover effect where the gradient follows the mouse cursor.
Credit: Tobias Reich
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
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.
Resets all styles to default values with one property. This will not affect
Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.
Uses the native font of the operating system to get close to a native app feel.
Creates a toggle switch with CSS only.
Creates a triangle shape with pure CSS.
Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.