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.

  • Offscreen

    CSS, Layout

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

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

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

  • Scroll progress bar

    CSS, Animation

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

  • 3-tile layout

    CSS, Layout

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

  • 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.

  • Focus Within

    CSS, Visual

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

  • Clearfix

    CSS, Layout

    Ensures that an element self-clears its children.

  • Fullscreen

    CSS, Visual

    Applies styles to an element when in fullscreen mode.

  • You might have heard that line-height should be unitless, but do you know why?

  • Hamburger Button

    CSS, Interactivity

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

  • Masonry Layout

    CSS, Layout

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

  • Pulse loader

    CSS, Animation

    Creates a pulse effect loader animation using the animation-delay property.

  • Displays a text on top of an image using an overlay.

  • Creates an animated underline effect when the user hovers over the text.