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.

  • Drop cap

    Makes the first letter of the first paragraph bigger than the rest of the text.

    CSS, Visual · Dec 30, 2020

  • Etched text

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

    CSS, Visual · Dec 30, 2020

  • Tip: Perfect nested border radius in CSS

    Nesting elements with rounded borders can look very wrong if not done correctly. Here's a quick tip on how to do it right.

    CSS, Visual · Apr 3, 2022

  • Custom text selection

    Changes the styling of text selection.

    CSS, Visual · Dec 30, 2020

  • Checkerboard background pattern

    Creates a checkerboard background pattern.

    CSS, Visual · Oct 13, 2021

  • Fluid typography

    Creates text that scales according to the viewport width.

    CSS, Visual · May 16, 2021

  • Polka dot background pattern

    Creates a polka dot background pattern.

    CSS, Visual · Oct 13, 2021

  • Stripes background pattern

    Creates a stripes background pattern.

    CSS, Visual · Jan 11, 2021

  • Zig zag background pattern

    Creates a zig zag background pattern.

    CSS, Visual · Oct 13, 2021

  • Circle

    Creates a circular shape with pure CSS.

    CSS, Visual · Dec 30, 2020

  • Triangle

    Creates a triangular shape with pure CSS.

    CSS, Visual · Oct 13, 2021

  • Gradient text

    Gives text a gradient color.

    CSS, Visual · Dec 30, 2020

  • Hide empty elements

    Hides elements with no content.

    CSS, Visual · Nov 18, 2022

  • Reset all styles

    Resets all styles to default values using only one property.

    CSS, Visual · Dec 30, 2020

  • Stylized quotation marks

    Customizes the style of inline quotation marks.

    CSS, Visual · May 16, 2021

1 3 4