The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Set a fallback color | .hero { background-color: #0f172a; } | View examples |
| Layer backgrounds | .hero {
background-image:
linear-gradient(#0008, #0008), url('/hero.webp');
} | View examples |
| Cover the box | .hero {
background-size: cover;
background-position: center;
} | View examples |
| Prevent tiling | .hero { background-repeat: no-repeat; } | View examples |
| Linear gradient | .banner {
background: linear-gradient(135deg, #2563eb, #7c3aed);
} | View examples |
| Radial gradient | .glow {
background:
radial-gradient(circle at top, #fff8, transparent 60%);
} | View examples |
| Round corners | .card { border-radius: 1rem; } | View examples |
| Draw a non-layout outline | .control:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 2px;
} | View examples |
| Add a shadow | .card { box-shadow: 0 10px 30px rgb(15 23 42 / 20%); } | View examples |
| Fade an entire subtree | .disabled-preview { opacity: .55; } | View examples |
| Filter rendered pixels | .thumbnail { filter: grayscale(1) contrast(1.1); } | View examples |
| Blend background layers | .hero { background-blend-mode: multiply; } | View examples |
Visual effects should reinforce hierarchy without obscuring content. Build backgrounds from a reliable color outward, understand layer order and clipping, prefer shadows and filters that do not trigger excessive rendering cost, and verify text contrast against every possible image state.
Step by step
Detailed examples
Order image layers over a color foundation
Comma-separated background images paint first-listed on top, while background-color sits beneath all of them. Each layer can have its own position, size, repeat, origin, and clip. Provide a color that keeps content readable while images load or fail.
.hero {
color: white;
background-color: #0f172a;
background-image: linear-gradient(rgb(15 23 42 / 35%), rgb(15 23 42 / 85%)), url('/hero.webp');
}Control cropping and tiling explicitly
cover fills the painting area and may crop; contain shows the whole image and may leave gaps. background-position chooses the crop focus. Decorative backgrounds have no alternative text, so content-bearing images belong in markup.
.hero { background-size: cover; background-position: 50% 35%; background-repeat: no-repeat; min-block-size: 24rem; }Use generated images for flexible effects
Gradients are background images, so they layer, size, and repeat like other images. Color stops define transition points; repeating gradients create patterns. Avoid encoding information only in a gradient and test interpolation for unwanted muddy bands.
.panel { background: radial-gradient(circle at 20% 0%, rgb(255 255 255 / 35%), transparent 45%), linear-gradient(135deg, #2563eb, #7c3aed); }Separate geometry, focus, and depth
Borders take layout space, outlines do not, and shadows are purely visual. border-radius clips backgrounds according to background-clip but does not automatically clip overflowing descendants. Keep focus outlines visible rather than replacing them with low-contrast shadows.
.card { border: 1px solid #cbd5e1; border-radius: 1rem; box-shadow: 0 8px 24px rgb(15 23 42 / 12%); }
.card:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }Understand subtree compositing
opacity affects an element and all descendants as one group, so use translucent colors when text should remain fully opaque. Filters and blend modes can create stacking contexts and increase rendering cost. Keep essential contrast valid after compositing and respect reduced-transparency user needs where supported.
.media { position: relative; }
.media::before { content: ""; position: absolute; inset: 0; background: url('/texture.webp') center / cover; opacity: .25; }
.media > * { position: relative; }Local code tester
Layer a resilient card effect
Adjust gradients, borders, shadows, and overlays while keeping text readable.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.