Copy-paste CSS code for the patterns you search most — centering, grids, dark mode, effects, animations, and utilities. Each snippet includes an explanation and usage notes.
New CSS snippets, straight to your inbox.
Push the footer to the bottom of the viewport on short pages using two lines of Flexbox.
Animated shimmer skeleton placeholders that preview content shape while data loads.
Hide content visually while keeping it accessible to screen readers — the correct alternative to display: none.
Show keyboard focus rings only for keyboard users — not mouse users — using :focus-visible.
Smooth fade-in, fade-up, and fade-scale entrance animations using @keyframes and animation-fill-mode.
Make list items appear one after another with cascading delays using nth-child animation-delay.
Sliding underline effect on links and nav items using CSS transform and pseudo-elements.
Eliminate orphaned words in headings with text-wrap: balance and improve paragraph line endings with text-wrap: pretty.
Maintain a fixed aspect ratio for any element using the modern aspect-ratio property.
Create triangles, hexagons, stars, and custom polygon shapes using CSS clip-path.
Touch-friendly horizontal carousel with CSS scroll-snap — no JavaScript required.
Status badges, category pills, notification counts, and tag chips in pure CSS.
A sticky sidebar with main content using CSS Grid — collapses to single column on mobile.
A complete design token system using CSS custom properties for color, spacing, typography, and motion.
Linear, radial, conic, and mesh gradient backgrounds — including animated gradient effects.
The definitive guide to centering elements in CSS — Flexbox, Grid, and absolute positioning methods.
Auto-fill responsive grid that adapts columns without media queries using minmax() and auto-fill.
Truncate single-line and multi-line text with an ellipsis (…) using pure CSS.
Apply a smooth gradient fill to text using background-clip and transparent color.
Frosted-glass card effect using backdrop-filter blur, semi-transparent background, and a subtle border.
Smooth card lift, shadow, and border-color transition on hover with transform scale.
Style browser scrollbars with custom colors, width, and border-radius using ::-webkit-scrollbar.
Pure CSS animated loading spinners — border spin, dots, and pulse variants with no JavaScript.
Sticky header that stays at the top on scroll with a backdrop blur and shadow effect.
Enable smooth scrolling for anchor links site-wide and for individual containers with scroll-behavior.
System-aware dark mode using CSS custom properties and prefers-color-scheme media query.
Font sizes that scale fluidly between viewport breakpoints using the CSS clamp() function.
