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.

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

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

  • Height transition

    CSS, Animation

    Transitions an element's height from 0 to auto when its height is unknown.

  • Image rotate on hover

    CSS, Animation

    Creates a rotate effect for the image on hover.

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

  • Rotating Card

    CSS, Animation

    Creates a two sided card which rotates on hover.

  • Input with prefix

    CSS, Interactivity

    Creates an input with a visual, non-editable prefix.

  • Offscreen

    CSS, Layout

    Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.

  • Learn how to use the cubic-bezier() class of easing functions and create beautiful animations that stand out.

  • Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.

  • Focus Within

    CSS, Visual

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

  • 3-tile layout

    CSS, Layout

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

  • Fullscreen

    CSS, Visual

    Applies styles to an element when in fullscreen mode.

  • Creates an animated underline effect when the text is hovered over.

  • Typography might seem intimidating, but you can quickly and easily create a simple typographic scale with this basic technique.