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.

  • Popout menu

    Reveals an interactive popout menu on hover/focus.

    CSS, Interactivity · Dec 30, 2020

  • Button border animation

    Creates a border animation on hover.

    CSS, Animation · May 24, 2021

  • Button swing animation

    Creates a swing animation on focus.

    CSS, Animation · May 24, 2021

  • Button fill animation

    Creates a fill animation on hover.

    CSS, Animation · Apr 2, 2021

  • Button grow animation

    Creates a grow animation on hover.

    CSS, Animation · May 24, 2021

  • Button shrink animation

    Creates a shrink animation on hover.

    CSS, Animation · May 24, 2021

  • Flexbox Cheat Sheet

    Flexbox allows you to create fluid layouts easily. If you are constantly looking up how it works, this handy cheatsheet is all you need.

    CSS, Layout · Jun 12, 2021

  • Pulse loader

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

    CSS, Animation · Oct 13, 2021

  • Shake on invalid input

    Creates a shake animation on invalid input.

    CSS, Animation · Jul 31, 2022

  • Image text overlay

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

    CSS, Visual · Oct 13, 2021

  • Fit image in container

    Fits an positions an image appropriately inside its container while preserving its aspect ratio.

    CSS, Layout · Dec 30, 2020

  • Hover underline animation

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

    CSS, Animation · Oct 11, 2021

  • Overflow scroll gradient

    Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.

    CSS, Visual · Oct 13, 2021

  • System font stack

    Uses the native font of the operating system to get close to a native app feel.

    CSS, Visual · Dec 30, 2020

  • Toggle switch

    Creates a toggle switch with CSS only.

    CSS, Visual · Dec 30, 2020

148