771 commands · 48 cheat sheets · 6 subcategories
CSS master quick reference — Page 3
Browse 186 commands from 12 focused cheat sheets on page 3 of 4. Each example opens its matching detailed section.
Typography and Content · 16 commands
CSS Shapes and Text Wrapping Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Wrap around a circle | .portrait {
float: inline-start;
shape-outside: circle(50%);
} | View examples |
| Give the float dimensions | .portrait { inline-size: 12rem; aspect-ratio: 1; } | View examples |
| Wrap an ellipse | .photo { shape-outside: ellipse(48% 42% at 50% 48%); } | View examples |
| Round an inset rectangle | .note { shape-outside: inset(0 8% 0 0 round 1.5rem); } | View examples |
| Wrap a polygon | .cutout {
shape-outside: polygon(0 0, 100% 0, 72% 100%, 0 100%);
} | View examples |
| Choose the fill rule | .star {
shape-outside:
polygon(evenodd, 50% 0, 100% 100%, 0 38%, 100% 38%, 0 100%);
} | View examples |
| Use SVG path data | .wave {
shape-outside:
path('M0,0 C80,20 20,180 100,200 L0,200 Z');
} | View examples |
| Use the margin edge | .pullquote { shape-outside: margin-box; } | View examples |
| Select a reference box | .portrait { shape-outside: circle(50%) content-box; } | View examples |
| Add breathing room | .portrait { shape-margin: clamp(0.5rem, 2vw, 1.25rem); } | View examples |
| Disable narrow wrapping | @media (max-width: 36rem) {
.portrait { float: none; shape-outside: none; };
} | View examples |
| Wrap image alpha | .silhouette {
shape-outside: url('/images/leaf-alpha.png');
} | View examples |
| Choose the alpha threshold | .silhouette { shape-image-threshold: 0.35; } | View examples |
| Shape from a gradient | .fade {
shape-outside:
linear-gradient(90deg, #000 65%, transparent 65%);
} | View examples |
| Match visual clipping | .portrait {
clip-path: circle(50%);
shape-outside: circle(50%);
} | View examples |
| Guard shape enhancement | @supports (shape-outside: circle(50%)) {
.portrait { shape-outside: circle(50%); };
} | View examples |
Typography and Content · 16 commands
CSS Typography and Text Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Declare a resilient stack | body {
font-family:
Inter, ui-sans-serif, system-ui, sans-serif;
} | View examples |
| Use scalable text | body { font-size: 1rem; } | View examples |
| Set unitless line height | body { line-height: 1.5; } | View examples |
| Select a numeric weight | strong { font-weight: 700; } | View examples |
| Use italic style | em { font-style: italic; } | View examples |
| Load a web font | @font-face {
font-family: 'Example Sans';
src: url('/fonts/example.woff2') format('woff2');
} | View examples |
| Avoid blocking text indefinitely | @font-face { font-display: swap; } | View examples |
| Limit line length | article { max-inline-size: 65ch; } | View examples |
| Align by writing direction | .copy { text-align: start; } | View examples |
| Preserve breaks and wrap | .message { white-space: pre-wrap; } | View examples |
| Keep text on one line | .label { white-space: nowrap; } | View examples |
| Break emergency overflow | .content { overflow-wrap: anywhere; } | View examples |
| Enable language-aware hyphenation | p { hyphens: auto; } | View examples |
| Show a single-line ellipsis | .title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} | View examples |
| Style an underline | a {
text-decoration: underline 0.12em;
text-underline-offset: 0.18em;
} | View examples |
| Align numeric columns | .amount { font-variant-numeric: tabular-nums; } | View examples |
Typography and Content · 15 commands
CSS Web Fonts and Variable Fonts Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Declare a WOFF2 face | @font-face {
font-family: 'Atlas';
src: url('/fonts/atlas.woff2') format('woff2');
font-weight: 400;
font-display: swap;
} | View examples |
| Provide a fallback stack | body {
font-family:
'Atlas', ui-sans-serif, system-ui, sans-serif;
} | View examples |
| Declare a weight range | @font-face {
font-family: 'Atlas Variable';
src: url('/fonts/atlas-var.woff2') format('woff2');
font-weight: 100 900;
} | View examples |
| Select a variable weight | .display { font-weight: 725; } | View examples |
| Enable optical sizing | .prose { font-optical-sizing: auto; } | View examples |
| Set a custom variation axis | .expressive {
font-variation-settings: 'wght' 640, 'GRAD' 80;
} | View examples |
| Keep text available during loading | @font-face {
font-family: 'Atlas';
src: url('/fonts/atlas.woff2') format('woff2');
font-display: swap;
} | View examples |
| Subset by character range | @font-face {
font-family: 'Atlas';
src: url('/fonts/atlas-latin.woff2') format('woff2');
unicode-range: U+0000-00FF;
} | View examples |
| Observe font readiness | await document.fonts.load("700 2rem 'Atlas'", 'Heading'); | View examples |
| Scale fallback glyph metrics | @font-face {
font-family: 'Atlas Fallback';
src: local('Arial');
size-adjust: 102%;
} | View examples |
| Override fallback line metrics | @font-face {
font-family: 'Atlas Fallback';
src: local('Arial');
ascent-override: 91%;
descent-override: 23%;
line-gap-override: 0%;
} | View examples |
| Align changing numbers | .data-table {
font-variant-numeric: tabular-nums lining-nums;
} | View examples |
| Control discretionary ligatures | .display {
font-variant-ligatures:
common-ligatures discretionary-ligatures;
} | View examples |
| Limit synthetic faces deliberately | .brand-wordmark { font-synthesis: none; } | View examples |
| Gate variable-font styling | @supports (font-variation-settings: normal) {
.expressive { font-variation-settings: 'GRAD' 80; };
} | View examples |
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 |
Motion and Transitions · 18 commands
CSS Animation Composition and Easing Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Replace the underlying value | .pulse { animation-composition: replace; } | View examples |
| Add an animation effect | .badge { animation-composition: add; } | View examples |
| Accumulate an effect | .counter { animation-composition: accumulate; } | View examples |
| Change composition at a keyframe | @keyframes move {
from { translate:
0; animation-composition: add; } to { translate: 2rem; };
} | View examples |
| Coordinate two animations | animation-name:
drift, pulse; animation-duration: 2s, 800ms; animation-composition: add, replace; | View examples |
| Add independent transforms | .icon {
animation:
spin 2s linear infinite, bob 1s ease-in-out infinite alternate;
animation-composition: add, add;
} | View examples |
| Separate transform components | .card { translate: 0 0; rotate: 0deg; scale: 1; } | View examples |
| Use standard ease | .panel { animation-timing-function: ease; } | View examples |
| Define a Bézier curve | .panel {
animation-timing-function: cubic-bezier(.2, .8, .2, 1);
} | View examples |
| Create discrete frames | .sprite {
animation-timing-function: steps(8, jump-end);
} | View examples |
| Jump immediately | .switch { animation-timing-function: step-start; } | View examples |
| Define sampled linear easing | .spring {
animation-timing-function:
linear(0, .7 40%, 1.05 70%, 1);
} | View examples |
| Ease one segment | @keyframes lift {
0% { translate:
0; animation-timing-function: ease-out; } 60% { translate: 0 -1rem; };
} | View examples |
| Avoid relying on final easing | @keyframes fade {
0% { opacity:
0; animation-timing-function: ease-out; } 100% { opacity: 1; };
} | View examples |
| Opt into discrete transitions | .popover {
transition: opacity .2s, display .2s allow-discrete;
} | View examples |
| Define an entry start style | @starting-style {
.popover:popover-open { opacity: 0; };
} | View examples |
| Respect reduced motion | @media (prefers-reduced-motion: reduce) {
.animated { animation: none; transition: none; };
} | View examples |
| Hint only imminent animation | .card.is-about-to-move { will-change: transform; } | View examples |
Motion and Transitions · 14 commands
CSS Motion Paths Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Follow an SVG-style path | .traveler {
offset-path: path('M 20 80 C 80 0 180 160 240 80');
} | View examples |
| Follow a basic shape | .satellite { offset-path: circle(40% at 50% 50%); } | View examples |
| Follow a contained ray | .marker {
offset-path:
ray(45deg closest-side contain at 50% 50%);
} | View examples |
| Choose the path reference box | .orb { offset-path: circle(42%) content-box; } | View examples |
| Move halfway along | .traveler { offset-distance: 50%; } | View examples |
| Animate path progress | @keyframes travel { to { offset-distance: 100%; } } | View examples |
| Face the path direction | .vehicle { offset-rotate: auto; } | View examples |
| Correct asset orientation | .vehicle { offset-rotate: auto 90deg; } | View examples |
| Keep a fixed orientation | .label { offset-rotate: 0deg; } | View examples |
| Choose the aligned element point | .pin { offset-anchor: 50% 100%; } | View examples |
| Set a ray starting point | .pin { offset-position: 25% 75%; } | View examples |
| Use the offset shorthand | .dot {
offset: path('M 0 0 L 200 0') 50% auto / center;
} | View examples |
| Gate path positioning | @supports (offset-path: circle(40%)) {
.status { offset-path: circle(40%); };
} | View examples |
| Remove optional travel | @media (prefers-reduced-motion: reduce) {
.traveler { animation: none; offset-distance: 100%; };
} | View examples |
Motion and Transitions · 24 commands
CSS Scroll-Driven Animations and View Timelines Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Attach after the shorthand | .subject {
animation: reveal linear both;
animation-timeline: view();
} | View examples |
| Fill a progress timeline | .subject { animation-duration: auto; } | View examples |
| Track document scrolling | .progress { animation-timeline: scroll(root block); } | View examples |
| Track the nearest scroller | .indicator {
animation-timeline: scroll(nearest block);
} | View examples |
| Track the element itself | .scroller { animation-timeline: scroll(self inline); } | View examples |
| Track visibility through a scrollport | .card { animation-timeline: view(); } | View examples |
| Set view axis and insets | .card { animation-timeline: view(block 15% 25%); } | View examples |
| Name a scroll timeline | .reader { scroll-timeline-name: --reading; } | View examples |
| Choose a named scroll axis | .reader { scroll-timeline-axis: block; } | View examples |
| Declare a named scroll timeline | .reader { scroll-timeline: --reading block; } | View examples |
| Consume a named timeline | .reader__progress { animation-timeline: --reading; } | View examples |
| Localize a repeated timeline name | .reader-widget { timeline-scope: --reading; } | View examples |
| Name a view timeline | .chapter { view-timeline-name: --chapter; } | View examples |
| Choose a named view axis | .chapter { view-timeline-axis: block; } | View examples |
| Adjust the visibility range | .chapter { view-timeline-inset: 10% 20%; } | View examples |
| Declare a named view timeline | .chapter { view-timeline: --chapter block 10% 20%; } | View examples |
| Animate across entry | .card { animation-range: entry; } | View examples |
| Choose range endpoints | .card { animation-range: entry 10% cover 35%; } | View examples |
| Set range endpoints separately | .card {
animation-range-start: entry 10%;
animation-range-end: cover 35%;
} | View examples |
| Guard the enhancement | @supports (animation-timeline: view()) {
.reveal { animation-timeline: view(); };
} | View examples |
| Honor reduced motion | @media (prefers-reduced-motion: reduce) {
.reveal { animation: none; };
} | View examples |
| Animate transform and opacity | @keyframes reveal {
from { opacity: 0; transform: translateY(2rem); };
} | View examples |
| Snap scrolling independently | .rail { scroll-snap-type: inline proximity; } | View examples |
| Start a View Transition | document.startViewTransition(update); | View examples |