CSS Visual 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.

  • Fullscreen

    CSS, Visual

    Applies styles to an element when in fullscreen mode.

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

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

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

  • Dynamic shadow

    CSS, Visual

    Creates a shadow similar to box-shadow but based on the colors of the element itself.

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

  • Provides a nicer alternative to text-decoration: underline where descenders do not clip the underline.

  • Etched text

    CSS, Visual

    Creates an effect where text appears to be "etched" or engraved into the background.

  • Limit multiline text to a given number of lines.

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

  • Toggle switch

    CSS, Visual

    Creates a toggle switch with CSS only.

  • Creates a striped list with alternating background colors.

  • Custom scrollbar

    CSS, Visual

    Customizes the scrollbar style for elements with scrollable overflow.

  • Creates a content container with a triangle at the top.

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