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.
25 CSS gradients for your next project
CSS, Visual
We hand picked 25 of our favorite CSS gradients from uiGradients for your next design. Get them now!
Flexbox Cheat Sheet
CSS, 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.
Button border animation
CSS, Animation
Creates a border animation on hover.
Button swing animation
CSS, Animation
Creates a swing animation on focus.
Button fill animation
CSS, Animation
Creates a fill animation on hover.
Button grow animation
CSS, Animation
Creates a grow animation on hover.
Button shrink animation
CSS, Animation
Creates a shrink animation on hover.
Hover underline animation
CSS, Animation
Creates an animated underline effect when the user hovers over the text.
Shake on invalid input
CSS, Animation
Creates a shake animation on invalid input.
Zebra striped list
CSS, Visual
Creates a striped list with alternating background colors.
Fit image in container
CSS, Layout
Fits an positions an image appropriately inside its container while preserving its aspect ratio.
Overflow scroll gradient
CSS, Visual
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
Toggle switch
CSS, Visual
Creates a toggle switch with CSS only.
Truncate multiline text
CSS, Layout
Truncates text that is longer than one line.
The currentColor CSS keyword
CSS, Visual
The
currentColorCSS keyword is a nifty alternative to custom properties for simple use cases.