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.

  • Scroll progress bar

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

    CSS, Animation · Oct 13, 2021

  • 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

  • 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

  • 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

  • Flexbox Cheat Sheet

    Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need.

    CSS, Layout · Jun 12, 2021

  • Popout menu

    Reveals an interactive popout menu on hover/focus.

    CSS, Interactivity · Dec 30, 2020

1 3 8