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.

  • What are CSS pseudo-classes?

    Learn how to use CSS pseudo-classes to style an element based on changes to its state.

    CSS, Web development · Nov 7, 2021

  • Scroll progress bar

    Creates a progress bar indicating the scroll percentage of the page.

    CSS, Animation · Oct 13, 2021

  • What are CSS variables and where can I use them?

    Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.

    CSS, Visual · Sep 28, 2021

  • Focus Within

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

    CSS, Visual · Dec 30, 2020

  • Image with text overlay

    Displays an image with a text overlay.

    CSS, Visual · Jan 29, 2023

  • Offscreen

    Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.

    CSS, Layout · Oct 11, 2021

  • Clearfix

    Ensures that an element self-clears its children.

    CSS, Layout · Dec 30, 2020

  • Fullscreen

    Applies styles to an element when in fullscreen mode.

    CSS, Visual · Oct 13, 2021

  • Isometric card

    Creates an isometric card.

    CSS, Visual · May 17, 2021

  • 3-tile layout

    Aligns items horizontally using display: inline-block to create a 3-tile layout.

    CSS, Layout · Dec 30, 2020

  • How can I create a custom responsive favicon for dark mode?

    Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide.

    CSS, Visual · Sep 28, 2021

  • 25 CSS gradients for your next project

    We hand picked 25 of our favorite CSS gradients from uiGradients for your next design. Get them now!

    CSS, Visual · Jun 12, 2021

  • 4 ways to center content with CSS

    Centering content with CSS might often feel tricky. Here are 4 easy tricks you can use in your code today.

    CSS, Layout · Sep 28, 2021

  • Hamburger Button

    Displays a hamburger menu which transitions to a cross button on hover.

    CSS, Interactivity · Dec 30, 2020

  • Masonry Layout

    Creates a masonry-style layout that is especially useful when working with images.

    CSS, Layout · Oct 13, 2021

1 3 8