CSS Snippets

The CSS snippet collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as snippets for handling user interactions.

Constant width to height ratio
Ensures that an element with variable width will retain a proportionate height value.
CSS, Layout · Dec 30, 2020
Disable selection
Makes the content unselectable.
CSS, Interactivity · Dec 30, 2020
Sibling fade
Fades out the siblings of a hovered item.
CSS, Interactivity · Dec 30, 2020
Tip: Perfect nested border radius in CSS
Nesting elements with rounded borders can look very wrong if not done correctly. Here's a quick tip on how to do it right.
CSS, Visual · Apr 3, 2022
Custom text selection
Changes the styling of text selection.
CSS, Visual · Dec 30, 2020
Display table centering
Vertically and horizontally centers a child element within its parent element, using display: table.
CSS, Layout · Dec 30, 2020
Checkerboard background pattern
Creates a checkerboard background pattern.
CSS, Visual · Oct 13, 2021
Fluid typography
Creates text that scales according to the viewport width.
CSS, Visual · May 16, 2021
Polka dot background pattern
Creates a polka dot background pattern.
CSS, Visual · Oct 13, 2021
Stripes background pattern
Creates a stripes background pattern.
CSS, Visual · Jan 11, 2021
Zig zag background pattern
Creates a zig zag background pattern.
CSS, Visual · Oct 13, 2021
Circle
Creates a circular shape with pure CSS.
CSS, Visual · Dec 30, 2020
Transform centering
Vertically and horizontally centers a child element within its parent element using CSS transforms.
CSS, Layout · Dec 30, 2020
Triangle
Creates a triangular shape with pure CSS.
CSS, Visual · Oct 13, 2021
Gradient text
Gives text a gradient color.
CSS, Visual · Dec 30, 2020

1 7 8