83 commands · 6 cheat sheets · CSS
Color and Effects master quick reference
Browse 83 commands from 6 focused cheat sheets on page 1 of 1. Each example opens its matching detailed section.
Color and Effects · 12 commands
CSS Backgrounds, Borders, and Visual Effects Cheat Sheet
| 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 |
Color and Effects · 19 commands
CSS Color Functions and Interpolation Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Use modern RGB syntax | .swatch { color: rgb(34 70 160 / 85%); } | View examples |
| Use cylindrical sRGB | .swatch { color: hsl(220 65% 42% / .85); } | View examples |
| Use perceptual polar color | .swatch { color: oklch(62% .18 255); } | View examples |
| Supply a Display P3 color | .swatch {
color: #0b63ce;
color: color(display-p3 0.05 0.38 0.86);
} | View examples |
| Gate wide-gamut syntax | @supports (color: color(display-p3 1 0 0)) {
.brand { color: color(display-p3 .1 .5 .9); };
} | View examples |
| Check output gamut | @media (color-gamut: p3) {
.hero { --accent: color(display-p3 .1 .55 .9); };
} | View examples |
| Mix in OKLab | .border {
color:
color-mix(in oklab, var(--accent) 35%, transparent);
} | View examples |
| Create a tint | .panel {
background:
color-mix(in oklch, var(--accent) 15%, white);
} | View examples |
| Choose a hue path | .spectrum {
color: color-mix(in oklch longer hue, red, blue);
} | View examples |
| Adjust an origin color | .hover {
color: oklch(from var(--accent) calc(l + .08) c h);
} | View examples |
| Change only alpha | .overlay {
background: rgb(from var(--accent) r g b / 35%);
} | View examples |
| Preserve a missing component | .variant { color: oklch(from var(--accent) l c none); } | View examples |
| Choose by used color scheme | :root {
color-scheme: light dark;
--surface: light-dark(#fff, #111827);
} | View examples |
| Adapt to forced colors | .button {
color: ButtonText;
background: ButtonFace;
border-color: ButtonText;
} | View examples |
| Remove decorative imagery | @media (forced-colors: active) {
.badge { background-image:
none; border: 1px solid CanvasText; };
} | View examples |
| Interpolate a gradient in OKLab | .hero {
background:
linear-gradient(in oklab, #06b6d4, #7c3aed);
} | View examples |
| Choose a gradient hue path | .wheel {
background:
linear-gradient(in oklch longer hue, red, blue);
} | View examples |
| Disable nonessential color motion | @media (prefers-reduced-motion: reduce) {
.pulse { animation: none; };
} | View examples |
| Pair color with a text cue | <p class="status" role="status"><span aria-hidden="true">✓</span> Backup complete</p> | View examples |
Color and Effects · 12 commands
CSS Colors, Themes, and Contrast Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| sRGB hexadecimal | .notice { color: #1d4ed8; } | View examples |
| Alpha channel | .overlay { background: rgb(15 23 42 / 60%); } | View examples |
| Perceptual color | .brand { color: oklch(55% 0.2 260); } | View examples |
| Mix colors | .soft {
background:
color-mix(in oklab, var(--brand) 15%, white);
} | View examples |
| Relative color | .hover {
color: oklch(from var(--brand) calc(l - .08) c h);
} | View examples |
| Declare supported schemes | :root { color-scheme: light dark; } | View examples |
| Scheme-dependent value | body { color: light-dark(#172033, #e6edf7); } | View examples |
| Query dark preference | @media (prefers-color-scheme: dark) {
:root { --surface: #0f172a; };
} | View examples |
| Style control accent | form { accent-color: #2563eb; } | View examples |
| Adapt forced colors | @media (forced-colors: active) {
.icon { color: ButtonText; };
} | View examples |
| Reuse current color | .icon { stroke: currentColor; } | View examples |
| Preserve non-color cue | a { text-decoration: underline; } | View examples |
Color and Effects · 13 commands
CSS Filters, Blending, and Backdrop Effects Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Chain element filters | .photo {
filter: saturate(1.2) contrast(1.1) brightness(0.95);
} | View examples |
| Blur rendered pixels | .preview { filter: blur(6px); } | View examples |
| Shadow an alpha shape | .logo {
filter: drop-shadow(0 0.5rem 0.5rem rgb(0 0 0 / 35%));
} | View examples |
| Reference an SVG filter | .art { filter: url("filters.svg#rough-paper"); } | View examples |
| Filter the backdrop | .panel {
background: rgb(15 23 42 / 78%);
backdrop-filter: blur(12px);
} | View examples |
| Gate backdrop enhancement | @supports (backdrop-filter: blur(1px)) {
.panel { backdrop-filter: blur(12px); };
} | View examples |
| Blend an element | .texture { mix-blend-mode: multiply; } | View examples |
| Bound a blend group | .poster { isolation: isolate; } | View examples |
| Blend background layers | .hero { background-blend-mode: multiply, normal; } | View examples |
| Reset to normal compositing | .hero { background-blend-mode: normal; } | View examples |
| Honor reduced transparency | @media (prefers-reduced-transparency: reduce) {
.glass { backdrop-filter: none; };
} | View examples |
| Retain a legible base | .glass {
color: white;
background-color: rgb(15 23 42 / 92%);
} | View examples |
| Transition a bounded property | .card { transition: filter 160ms ease-out; } | View examples |
Color and Effects · 14 commands
CSS Images, Gradients, and Object Fit Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Keep meaningful images semantic | <img src="chart.webp" alt="Revenue rose from $2M to $3M" width="800" height="450"> | View examples |
| Hide a decorative image | <img src="divider.svg" alt="" width="320" height="24"> | View examples |
| Crop to cover a box | .avatar {
inline-size: 8rem;
aspect-ratio: 1;
object-fit: cover;
} | View examples |
| Contain the complete object | .product {
inline-size: 100%;
block-size: 18rem;
object-fit: contain;
} | View examples |
| Choose the crop focus | .portrait {
object-fit: cover;
object-position: 50% 25%;
} | View examples |
| Paint a linear gradient | .banner {
background:
linear-gradient(120deg, #172554 0%, #2563eb 55%, #67e8f9 100%);
} | View examples |
| Paint a radial highlight | .spotlight {
background:
radial-gradient(circle at 70% 25%, #fff9 0 8%, transparent 45%), #172554;
} | View examples |
| Paint angular segments | .meter {
background:
conic-gradient(#16a34a 0 72%, #d1d5db 72% 100%);
} | View examples |
| Repeat a stripe pattern | .warning {
background:
repeating-linear-gradient(135deg, #facc15 0 12px, #111827 12px 24px);
} | View examples |
| Offer resolution variants | .logo {
background-image:
image-set(url('/logo.png') 1x, url('/logo@2x.png') 2x);
} | View examples |
| Offer modern image formats | .hero {
background-image:
image-set(url('/hero.avif') type('image/avif'), url('/hero.webp') type('image/webp'));
} | View examples |
| Preserve pixel-art edges | .sprite { image-rendering: pixelated; } | View examples |
| Layer over a color fallback | .hero {
background-color: #172554;
background-image:
linear-gradient(#172554cc, #1d4ed8cc);
} | View examples |
| Gate a newer color space | @supports (background: linear-gradient(in oklab, red, blue)) {
.hero { background-image:
linear-gradient(in oklab, #172554, #22d3ee); };
} | View examples |
Color and Effects · 13 commands
CSS Masking, Clipping, and Compositing Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Clip to a circle | .avatar { clip-path: circle(50%); } | View examples |
| Fade with a mask | .photo {
mask-image: linear-gradient(#000 70%, transparent);
} | View examples |
| Clip a polygon | .tag {
clip-path:
polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
} | View examples |
| Clip an inset round rect | .panel { clip-path: inset(1rem round 1.5rem); } | View examples |
| Reference an SVG clipPath | .portrait { clip-path: url(#portrait-clip); } | View examples |
| Select the clipping box | .badge { clip-path: circle(45%) content-box; } | View examples |
| Load a mask image | .logo { mask-image: url('/masks/logo.svg'); } | View examples |
| Size one mask layer | .logo {
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
} | View examples |
| Choose alpha interpretation | .art { mask-mode: alpha; } | View examples |
| Set mask origin and clip | .card {
mask-origin: content-box;
mask-clip: padding-box;
} | View examples |
| Add mask layers | .shape { mask-composite: add; } | View examples |
| Subtract a mask layer | .ring { mask-composite: subtract; } | View examples |
| Gate a masking enhancement | @supports (mask-image: linear-gradient(#000, transparent)) {
.hero { mask-image:
linear-gradient(#000, transparent); };
} | View examples |