Strong opinions about modern CSS technique, borrowed from experts, for agents to know and reach for.
This is every entry in good-css by Vojta Holik, flattened into a single HTML file. Each one has when to use it, the CSS, why it works, the rules and who it is borrowed from. The specimen under each title runs the code blocks you see below it, verbatim. Drag a specimen's corner or pick a width to see it adapt.
Start every new project with it. In an existing project add one rule at a time and look at the result, because min-width: 0 and the font rules change how things already render.
Check Make the frame narrower. The two halves stay equal, the heading stays balanced, and the wide image stays inside.
min-width: 0 lets flex and grid items shrink below their content. Their default is min-width: auto, which is why a long word or a wide child overflows a grid.
interpolate-size: allow-keywords turns on transitions to and from auto for the whole page. Accordion that animates its height depends on it.
text-wrap: pretty tells the browser to spend more effort on line breaks. It avoids a last line that holds one short word, and Safari also evens out the ragged edge. The property inherits, so :root reaches every element.
text-wrap: balance gives headings lines of similar length.
font-synthesis: none stops the browser from faking a bold or italic that the font file lacks.
The two smoothing rules switch macOS from subpixel to grayscale antialiasing. Text renders thinner and matches the weight shown in Figma. Other systems ignore them.
100svh is the viewport height with the mobile browser toolbars showing, so the page never sits behind them. 100dvh changes as the toolbar moves and re-lays out the page each time.
scrollbar-gutter: stable reserves the scrollbar's space. The page does not shift sideways when a modal locks scrolling or when content grows past one screen.
overflow-wrap: break-word breaks a word that cannot fit on a line, such as a URL, where it would otherwise run out of its box. Long text that wraps, truncates or clamps has the rest.
-webkit-text-size-adjust: 100% stops iOS from inflating text in landscape.
-webkit-tap-highlight-color: transparent removes the gray flash iOS and Android paint over a tapped element.
Inputs at 16px or more stop iOS Safari from zooming the page on focus. It does not zoom back out.
touch-action: manipulation tells the browser the element never double-tap zooms, so click fires without the wait.
user-select: none on controls stops a long press from selecting a button's label.
Rules
Load every weight and style the design uses. With font-synthesis: none a missing bold renders as regular.
With min-width: 0 on everything, a sized image, icon or avatar in a flex row shrinks to make room for the text beside it. Give it flex: none.
The reset removes the tap highlight, so every pressable element needs its own :active state. Press feedback has it.
Never fix input zoom with user-scalable=no or maximum-scale=1. That takes zoom away from people who need it.
Keep user-select: none to controls. Never set it on body or on links, because people copy text.
Text the user types inherits pretty, in textarea and contenteditable. If lines shift while typing, set text-wrap: stable on that element.
The reserved gutter puts centered content slightly off-center on a page too short to scroll. Chris Coyier documents this. Accept it.
svh is for documents and heroes. An app shell with UI pinned to the bottom uses height: 100dvh, so it tracks the toolbar. Emil Kowalski draws this line in his mobile-native skill.
Support
text-wrap: pretty in Chrome 117 and Safari 26, ignored by Firefox. scrollbar-gutter in Chrome 94, Firefox 97, Safari 18.2. interpolate-size in Chrome 129 only. The rest works everywhere.
inline is the direction text runs and block the direction blocks stack. Start and end follow dir and writing-mode, so one set of declarations renders mirrored in a right-to-left page.
Rules
The four-value margin, padding and inset shorthands stay physical. Use the -inline and -block shorthands.
Write colors in oklch() and derive every related color from a base with color-mix(in oklch, …). Never hardcode a second hex or an rgba() for a hover, tint or transparent version.
Check Move the hue. The hover and the subtle color follow, and stay as light as they were.
The three channels are lightness, chroma and hue. Lightness is perceptual, so two colors with the same L look equally light whatever their hue. Scales and contrast become predictable.
Mixing in OKLCH keeps the hue of the base color, where sRGB mixing drifts toward gray.
One base value drives the whole family. Change the base and the hover and subtle versions follow.
Rules
Write grays, white and black with none as the hue, as in oklch(98% 0 none). A written hue of 0 is red, and it pulls every mix toward red. Half white oklch(1 0 0) and half a blue at hue 264 came out at hue 312 in Chrome and Safari. With none, or with the keyword white, it stayed at 264.
color-scheme: light dark says the page supports both and follows the system setting. It also switches the browser's own UI, such as form controls, scrollbars and the default page background.
light-dark(a, b) returns a in a light scheme and b in a dark one.
It resolves per element. Set color-scheme on any subtree and every token used inside it flips. The same tokens serve a manual toggle and a section that is always dark.
Rules
Switch themes by setting color-scheme. Never redefine the tokens.
The grays use none for the hue, so they can be mixed with a color later without drifting toward red. OKLCH color has the measurement.
light-dark() takes two colors. Anything else that differs by theme, such as an image, needs its own rule.
Add <meta name="color-scheme" content="light dark"> so the browser paints the right background before the CSS loads.
Use it for anything that should grow with the screen, starting with font sizes and section spacing. One declaration replaces a ladder of breakpoint overrides.
Check Change the width. The text is 16px up to a 400px viewport and 28px from 1600px. Open it in its own tab for the full range.
clamp(min, preferred, max) uses the preferred value and stops at the two bounds.
The vw part of the preferred value grows with the viewport. The rem part sets where the growth starts.
--text-body above is 16px up to a 400px viewport, 28px from 1600px, and a straight line between.
Rules
Write the preferred value as rem + vw, never vw alone. clamp(1rem, 1vw, 1.75rem) stays at 16px on every screen narrower than 1600px, because 1vw is smaller than 1rem until then. A bare vw value also ignores the reader's font size setting.
Work the preferred value out from two points. The slope is (max - min) / (wide - narrow), in px over px, and times 100 it is the vw number. The rem part is min - slope × narrow.
Keep both bounds in rem so they follow the reader's font size.
For a font size, keep the maximum at or below 2.5 times the minimum. The vw part does not grow when the reader zooms, so fluid text grows less than the page. Past 2.5 times, 500% zoom cannot double the text at some widths, and that fails WCAG 1.4.4.
Put fluid values in tokens. Components use the token and never repeat the math.
Use it when a design has more than two or three font sizes. Six numbers describe every size, and the browser derives the steps. It replaces a table of sizes per breakpoint, and it replaces a generator that someone has to find and run again.
Check Make the frame narrower. Every size shrinks along a straight line, and stops changing below 320px and above 1240px. At 1240px or wider the readout says body 20px, title 48.83px and padding 40px. At 320px it says 18px, 37.32px and 18px.
The first six lines are the whole design decision. Widths and sizes are in rem, written as plain numbers, so 20 is 320px and 1.125 is 18px. Body text runs from 18px on a 320px screen to 20px on a 1240px one, and each heading step is 1.2 times the last on the phone and 1.25 times on the desktop.
--fluid is a length that is 0 at the narrow width, 1rem at the wide width and a straight line between. It holds the only clamp(), and that one bounds every token.
--at-narrow and --at-wide are the two base sizes, each weighted by how close the viewport is to its width. Their sum is step 0.
pow() raises each ratio to the step number. A step is the narrow scale's size times one weight plus the wide scale's size times the other, which is the line Fluid sizes with clamp() draws between two points.
A space token is a multiple of step 0, so it grows as much as body text does. A pair such as --space-s-l gives the two terms different multipliers. It is the small size on the phone and the large size on the desktop, 18px to 40px here.
Rules
Write the inputs as plain numbers. With 20rem and 77.5rem the --fluid line divides a length by a length, and Firefox does not support that.
Change an input in the rule that declares the steps. A step takes its value where it is declared, so a ratio set on a descendant changes nothing below it.
Derive sizes below step 0 from step 0 and the narrow ratio, as --step--1 does. With both ratios a small size shrinks as the screen grows.
Check the top step against the limit in Fluid sizes with clamp(). Step n passes when (size-wide / size-narrow) × (ratio-wide / ratio-narrow)ⁿ is 2.5 or less. The example gives 1.31 at step 4.
Write a pair only where a layout uses it, and never use one for a font size. A pair is steep on purpose and breaks that limit.
Use it as the container of every page, whether or not anything on it goes wider than the content. A centered max-width wrapper is the sign, such as .container, .wrapper or Tailwind's mx-auto max-w-*. One grid on the section replaces the section > .container wrapper pair and costs no more than it, and any child can be content width, wider, or edge to edge. Put it on main for a page of flowing content, or on each section. A band, a figure or a block that an editor later wants wider then takes one class, with no negative margin and no new wrapper.
Check Make the frame narrower. The breakout shrinks to content width, the gutters hold, and nothing overflows.
The container defines three nested widths with named grid lines:
Two lines named content-start and content-end create a named area, content. That is why grid-column: content works with no line numbers.
min(100% - 2 × gutter, max) shrinks the content column on small screens with no media query.
minmax(0, …) lets the breakout tracks collapse, so a breakout falls back to content width when there is no room. With a fixed breakout size the page overflows on small screens.
grid-template-columns: inherit gives a full-width band the same grid, so content inside it lines up with the page column without another wrapper. This is Kevin Powell's addition. In Ryan Mulligan's original the full-width child is a plain box.
Rules
Every child must be placed. An unplaced child of the grid lands in the gutter track.
Every direct child is a grid item. Wrap a run of inline elements in one element.
Change a width by overriding --content, not by writing a new column template.
In a pass over existing CSS, replace each centered max-width wrapper with the grid, and keep the wrapper's width as --content on its section.
In other systems
The column template goes wherever the project defines reusable styles. Where child selectors are not available, as in StyleX or Tailwind without a custom variant, each child sets its own grid-column to content, breakout or full-width.
Use it for any pair where one side has an ideal width and the other takes the rest, such as a media object, an input with a button, or a page with an aside.
Check Make the frame narrower. When the main side would get less than half the width, it wraps below and both sides fill the row.
The main side's huge flex-grow takes all the free space, which holds the sidebar at its basis.
Once the main side would get less than half the container it wraps below, and both sides grow to full width.
Rules
The wrap point is a share of the container, not a length. Change min-inline-size to move it.
Drop the sidebar's flex-basis for a sidebar sized by its content.
For a sticky sidebar, add align-self: start beside position: sticky and its inset. The two sides stretch to the same height, and a stretched sidebar has no room to stick.
A bare img or video as one of the sides stretches to the height of the row and distorts. Set align-items: start on the container.
Use it for any component that appears in slots of different widths. The component responds to the space it is given, where a media query only knows the viewport.
Check The wide slot lays the card out in two columns with a larger heading. Make the frame narrower until that slot is under 30rem: it becomes the narrow card.
The query measures the nearest container, so the same card is right in a sidebar and in a wide column.
1cqi is 1% of that container's inline size. The clamp() math from Fluid sizes with clamp() carries over, per component.
Rules
The container must be an ancestor. An element cannot query itself.
A container cannot take its width from its content. Never put container-type on a shrink-to-fit element, or it collapses to zero.
With no container ancestor the query never matches. Kevin Powell makes header, main and footer containers in his reset, so most components need none of their own.
Container units are different from queries. With no container above the element, cqi measures the viewport, so one token written with cqi serves the page and every slot.
Never register a fluid token that uses cqi with @property. A registered length computes once on :root, where there is no container, and every slot then gets the viewport's value.
Use it whenever things sit on top of each other, such as text over an image, a badge on a card, or two icons that swap. It replaces position: absolute with its offsets, sizes and transforms.
Check Change the width. Each stack keeps the size of its largest layer and the badge stays in its corner.
Use it wherever content is centered or end-aligned in a container that can become too small, such as a tab row, a toolbar or a vertically centered modal.
Check At full width the tabs are centred. At 360 the row scrolls, and you can still reach the first tab.
Use it on any page built from reorderable sections, above all in a CMS where an editor decides the order. When two particular sections meet, the spacing between them changes on its own.
Check Move the sections with the arrows. Where a named pair meets, the sulphur padding between the two shrinks and the readouts change: logos before features, features before cta, logos after hero, faq after features. Logos gets a line on top only straight after hero. Every other edge keeps 96px.
Use it wherever elements sit one above another, such as form fields, the parts of a card or the blocks of an article. The parent sets one space between its children, and no child carries a block margin of its own.
Check In both boxes the first child touches the top padding and the last child the bottom padding, with no space left over at either end. The fields are 1rem apart. In the article each heading has twice the space above it and half the space below it.
A margin describes the relation between two neighbors, so the element itself is the wrong place for it. A paragraph with margin-block-end leaves that margin behind when it is the last child of a padded box.
gap puts space between flex items only. Nothing is left above the first child or below the last.
* + * matches every child that has a sibling before it, so the first child gets no margin. Heydon Pickering named the selector the lobotomized owl.
The fallback in var(--flow-space, 1em) is in em, so the space above each element follows that element's font size.
A custom property on a child changes the space above that child alone. A heading asks for more room above itself, and whatever follows a heading asks for less.
Rules
Use the flex form in a component whose children you know. Use the margin form for content you do not control, such as CMS or Markdown output, because flex turns every child into a flex item.
A flex column stretches its children, so a button or link that is a direct child becomes full width. Set align-self: start on it.
In the margin form, zero the children's block margins first. Without that line the browser's default margins stay above the first child and below the last.
Keep the >. Without it the rule reaches every nested element, list items included.
The margin form counts a hidden child, so a hidden first child leaves a space at the top. gap ignores hidden children.
Support
gap in flex layout in Chrome 84, Firefox 63, Safari 14.1. :is() in Chrome 88, Firefox 78, Safari 14.
Use it when one item in a flex row or column sits apart from the rest, such as the actions at the bottom of a card, the account link at the end of a toolbar, or a title centered in a full-height section between a header and a footer.
Check The hero is as tall as the frame, and its title sits centered between the toolbar and the line at the bottom. In the toolbar the account link is pushed to the far end. Scroll down: the two cards are the same height and both buttons sit on the bottom edge, whatever the length of the text.
In a flex container an auto margin takes all the free space on its side. One auto margin pushes the item, and everything after it, to the far end.
Two opposite auto margins split the free space, so the item sits centered between its neighbors. The header stays at the top and the footer at the bottom, and either can be missing.
gap still applies. It is the least space the pushed item keeps when there is no free space left.
Rules
The container needs free space. A card has it when a grid row stretches it to match a taller neighbor. A column that is the only child of a taller box needs block-size: 100%.
The centered item is centered in the space left over, not in the section. A footer with no header pulls the title up by half the footer's height.
Write min-block-size, never block-size. A fixed height cuts off long content.
This is a flex technique. In a grid column the spare height goes to the rows first and every child grows.
It replaces a spacer element, space-between on a container with more than two children, and a wrapper around the group that should stay together.
Support
Auto margins work wherever flexbox does. margin-block in Chrome 87, Firefox 66, Safari 14.1. svh in Chrome 108, Firefox 101, Safari 15.4.
Use it on any text that comes from a user or a CMS, such as names, titles, URLs and excerpts. Decide for each one what happens when the content is longer than the design. It wraps, it is cut to one line, or it is cut to a few lines.
Check Make the frame narrower. The long address breaks inside its box and never sticks out of it. Each name stays on one line and ends in an ellipsis. The excerpt stops after three lines with an ellipsis, at any width.
overflow-wrap: break-word breaks a word only when it cannot fit on a line by itself. Ordinary text wraps as before. It inherits, so the one declaration in the reset covers the page.
The reset's min-width: 0 lets a flex or grid item get narrower than its longest word. It does nothing for the word, which then paints over the next column. The two rules need each other.
nowrap keeps the text on one line, overflow cuts it and text-overflow draws the ellipsis at the cut.
-webkit-line-clamp counts lines, so the clamp holds at any font size and any width.
Rules
Put the truncation on the element that holds the text. On a flex or grid container the text is cut and no ellipsis appears.
Every flex item between the row and the truncated text must be able to shrink. The reset's min-width: 0 covers that. Without the reset, set min-inline-size: 0 on each of them.
The clamp needs all four declarations. Unprefixed line-clamp is in no browser yet.
Put padding on a wrapper, never on the clamped element. The next line shows through the bottom padding.
Use break-word on the root and not anywhere. anywhere also shrinks the minimum content width, so a box sized by its content collapses to one letter per line.
A table with automatic layout ignores break-word. Set overflow-wrap: anywhere on the cell.
Truncate only text the reader can get in full somewhere else. Never truncate text they have to read.
Support
text-overflow, -webkit-line-clamp and overflow-wrap: break-word work everywhere. With overflow: clip the ellipsis and the clamp draw in Chrome 150 and Safari 27, tested on 2026-10-01. Firefox is untested, and overflow: hidden is the form to fall back to. overflow-wrap: anywhere in Chrome 80, Firefox 65, Safari 15.4.
Use it on every image, video or embed whose file you do not control, such as thumbnails, cover photos and avatars. The box keeps its shape whatever the file's ratio, and it has that shape before the file loads.
Check The four covers are the same shape, whatever the shape of the file: each picture fills its box and is cropped, never stretched. The last one fails to load and shows the box with its background. The avatars are round and the same size beside any length of name, and the pale one still has an edge on the card of its own color.
aspect-ratio works out the height from the width, so the space is there before the file loads.
object-fit: cover scales the picture until it fills the box and crops the rest. The default stretches it.
The background color shows until the image paints, and in its place when the load fails.
An outline with a negative offset draws inside the image's edge. It takes no space and follows the border-radius, so a white avatar on a white card still has an edge.
flex: none stops the text beside the avatar from squeezing it.
Rules
One axis must be auto. A height attribute or a fixed height wins over the ratio. The reset sets height: auto on img, svg and video, and block-size: auto here does the same for an iframe.
object-fit does nothing until the box has both sizes or a ratio.
cover crops. Use contain for logos, product shots and anything that must stay whole. Move the crop with object-position.
Leave the background color off an image that has transparent areas. It shows through them.
A fixed-size image in a flex row needs both sizes, as the avatar has. With only a width it stretches to the height of the row.
In Safari a failed image ignores aspect-ratio and draws a square box. Where a failed load must not move the layout, put the ratio on a wrapper and give the image inline-size: 100% and block-size: 100%.
aspect-ratio in Chrome 88, Firefox 89, Safari 15. An outline that follows the radius in Chrome 94, Firefox 88, Safari 16.4. light-dark() in Chrome 123, Firefox 120, Safari 17.5. The square box of a failed image is from real Safari 27, tested on 2026-10-01. Chrome 150 keeps the ratio.
Use it on single-line labels in buttons, badges and chips, so equal padding looks equal in any font.
Check In the first button the sulphur box ends at the top of the capitals and at the baseline, so the padding round it is even and the descenders hang into it. The second has spare room above the capitals and under the baseline. The third is a flex container and is not trimmed. The fourth is a flex button with an icon, and its label is trimmed through the span. At normal size they are 35px, 48px, 48px and 40px tall.
A line of text reserves space above the capitals and below the baseline, and the two amounts differ from font to font. Equal padding around that line puts the letters off-center.
trim-both cap alphabetic cuts the box down to the cap height and the baseline. The padding then starts at the letters.
A font swap or a fallback font no longer moves the label.
Rules
It does nothing on a flex or grid container. A button that is inline-flex because it holds an icon needs the declaration on the element that wraps the text, as in the second rule of the block.
The button gets shorter, because the padding now starts at the letters. With 0.75rem of padding it went from 48px tall to 35px in Chrome and Safari. Raise the padding to keep the height.
Use it for one line. Descenders hang into the bottom padding, which is the intent.
Scope it to labels. Never set it on *, because it shrinks every text block. A one-line paragraph at 16px/1.5 went from 25px tall to 11px.
Write no fallback. Without support the label keeps its normal line box.
Use it on every icon that sits next to a label, in buttons, links, list rows and notices. The icon takes its size from the font, so it follows the text and never needs a size per variant.
Check Each icon is as tall as the capital letters beside it and stands on their baseline, at all three sizes. Make the frame narrower until the notice wraps: its icon stays beside the first line.
1cap is the height of the font's capital letters. An icon that tall reads as one more capital.
An svg has no baseline of its own. align-items: baseline rests its bottom edge on the baseline of the text, so the icon stands where a capital stands.
1lh is the height of one line. The second rule makes the icon's box as tall as the first line of the label, and the drawing centers itself in that box. The icon stays beside the first line when the label wraps.
A gap in em keeps the space in proportion.
Rules
Never size an icon in px. A 16px icon that matches 16px text is 5px to 7px shorter than the capitals of 32px text.
Keep flex: none. Without it a long label squeezes the icon.
The svg needs a viewBox. inline-size: auto then follows the drawing's ratio.
Many icon sets leave padding inside the drawing, and 1cap looks small on those. Raise the number and keep the unit, as in 1.2cap.
Do not use align-items: center on a label that can wrap. The icon then sits beside the middle line.
cap in Chrome 118, Firefox 97, Safari 17.2. lh in Chrome 109, Firefox 120, Safari 16.4. Tested in Chrome 150 and real Safari 27 on 2026-10-01, where the icon came out within 0.01px of the capital height at 16px and at 32px.
Use it as the focus style for every interactive element. Never write outline: none.
Check Press Tab through the row. Each ring takes the color and size of its element. A mouse click on a button shows no ring, and a click into the input does.
Use it on every :hover rule, so a tap on a touch screen does not leave the hover state stuck.
Check With a mouse the button changes on hover. On a touch screen, or with a stylus, the readout says the query does not match and a tap leaves nothing stuck.
Use it on every button and anything else that can be pressed.
Check Press and hold a button. It shrinks the moment you press, label and all, and eases back when you let go. With Reduce Motion on it still shrinks, with no easing.
A native button responds the instant a finger lands. :active does the same on every kind of input. Feedback that waits for click arrives when the finger leaves, and that reads as lag.
scale() shrinks the label and icon along with the button, so the whole control reads as pressed.
Rules
Keep the scale between 0.95 and 0.98.
The reset removes the browser's tap highlight. Without this entry a tap gives no feedback at all.
When feedback needs a script, listen for pointerdown, not click.
Use it for cards, list rows and tiles where the whole area should navigate. It replaces an <a> wrapped around the card, which makes a screen reader read every word as the link text, and it replaces a click handler on a div.
Check Click anywhere on the card, the corners and the paragraph included: the link count goes up. Click Save: only the button count goes up. Tab to the link: the ring is drawn round the whole card.
html
<articleclass="card"><h3><aclass="card-link"href="/reports/q3">Quarterly report</a></h3><p>Revenue grew in every region.</p><buttontype="button">Save</button></article>
The pseudo-element belongs to the link and covers the card, so a click anywhere activates the link. It is a real link, so open in new tab and the status bar URL still work.
The link text stays short. A screen reader announces "Quarterly report" and not the whole card.
:has() moves the focus ring from the small link to the card it activates.
Other controls sit above the overlay and keep their own clicks.
Rules
No element between the card and the link may be positioned. The overlay would size itself to that element.
The link's own ring is made transparent, never removed, as One focus ring with :focus-visible requires. Write the full 2px solid transparent. Safari ignores outline-color on its default ring.
Text under the overlay cannot be selected. Accept it.
Use it wherever a script adds a class to a parent because of what it contains or what state a child is in.
Check The article with an image spans two columns. Only the heading before a paragraph loses its margin. The form lights up when you tab into its field. The page stops scrolling while the dialog is open, and does not shift sideways.
:has() matches an element by its descendants or following siblings, and it accepts state pseudo-classes. Content and form state can style any ancestor.
On the root it works as a page-wide listener. The last rule locks page scroll while a modal dialog is open and lifts the lock when it closes, with nothing to clean up.
Rules
:modal matches showModal() only, so a non-modal dialog does not lock the page.
Keep scrollbar-gutter: stable with the scroll lock. Without it the page shifts sideways when the scrollbar disappears. The reset sets it.
Use it for inline form validation, in place of blur listeners and a "touched" class.
Check The field has no color on load. Type three characters and leave it: the border takes the danger color. Eight or more and it takes the success color.
Use it for any multi-line input, such as a chat composer or a comment box. field-sizing: content sizes the textarea to its text, so there is no auto-grow script and no hidden mirror element.
Check Type or paste several lines into each. Both start at three lines and stop at twelve. The second one eases to its new height.
The height snaps to each new line. To animate it, wrap the textarea and let a ResizeObserver copy its height onto the wrapper. The wrapper transitions.
Motion exists only inside the query, so the default is none. People who never touched the setting match no-preference and see it.
Rules
Build the state change first and add the motion inside the query. Do not strip motion afterwards with a global rule that sets every duration to 0.01ms.
Fades of opacity and color are not motion and can stay outside the query.
Animation driven by a script checks the same query with matchMedia.
Use them in every transition and animation. Two easing curves, defined once, and a rule for durations.
Check Toggle the dropdown. It fades over 180ms on --ease-out. Then run the curves. The --ease-out square leaves faster than plain ease-out and settles for longer. The --ease-in-out square waits longer than plain ease-in-out, then crosses the middle faster.
An ease-out curve starts fast, so the interface moves at the moment the user is watching. Use --ease-out for anything entering or leaving.
An ease-in-out curve suits something that is already on screen and moves to a new place. Use --ease-in-out there.
The built-in ease-out and ease-in-out keywords are weak versions of the same shapes. These two are stronger.
Rules
Never use ease-in on UI. It starts slow and reads as lag.
Keep a UI transition at 300ms or less. Press feedback takes 100 to 160ms, tooltips and small popovers 125 to 200ms, dropdowns 150 to 250ms. The one exception is a modal or drawer, which takes 200 to 500ms.
Name the properties in a transition. Never write transition: all.
Other entries write var(--ease-out, ease-out), so their snippets work before these tokens exist.
Whether something should animate at all is not a CSS question. Emil Kowalski's animate and review-animations skills answer it.
Use it when one state change should drive several values together, or when a script feeds a number such as pointer position or progress into CSS and the result should ease.
Check Hover the card, or tab to its link. The arrow turns, the bar grows and the last line fades in, all together, and the readout runs through the numbers between 0 and 1 instead of jumping.
An unregistered custom property is a string, and a string cannot be interpolated. Registering it with a syntax gives it a type, and the browser then transitions it like any number.
One transition with one easing drives every dependent value. The children derive theirs with calc(), so the parts stay in step.
inherits: true passes the number down to the children that use it.
Rules
initial-value is required for every syntax except "*".
rotate, scale and translate do nothing on an inline element. Give the element display: inline-block or another box type first.
A registration is global. Register each name once and keep the names specific.
A script only writes the variable, as in el.style.setProperty("--x", "40%"). The easing and duration stay in CSS.
Other useful types are <length-percentage> for a gradient position and <angle> for a conic gradient.
A box-shadow transition repaints the shadow on every frame. Each shadow here is painted once, and the transition changes only opacity, which the compositor handles. In a Chrome trace of one card it took 12 paint events, against about 78 for a plain box-shadow transition.
The two shadows cross-fade, so the end state is exactly the raised shadow and not the sum of both.
isolation: isolate gives the card its own stacking context. z-index: -1 then puts the pseudo-elements above the card's background and below its content.
Rules
The card needs its own background. The pseudo-elements have none.
Use it on any multi-page site to crossfade between pages. It replaces a client-side router or a page-transition script.
Check Follow the link. The two pages crossfade, the header holds still, and the readout says yes. In Firefox the page changes at once.
css
@view-transition { navigation: auto; }
Why it works
On a same-origin navigation the browser snapshots the old and new page and crossfades them. Parts that do not change, such as the header, appear to stay in place.
Rules
Both pages must include the rule.
The default crossfade adds no movement and needs no reduced-motion guard. If you add slides, put the rule inside @media (prefers-reduced-motion: no-preference).
Use it for the underline on a tab row or the bar beside a side nav. It replaces a script that measures the active item and writes a transform and a width.
Check Click the links in each row. The bar slides under that row's current link and takes its width. The bar in the other row does not move, because each row scopes its own anchor.
html
<navclass="tabs"><ul><li><ahref="/overview"aria-current="page">Overview</a></li><li><ahref="/pricing">Pricing and billing</a></li><li><ahref="/docs">Docs</a></li></ul></nav>
The anchor name sits on whichever item carries aria-current. Move the attribute and the anchor moves with it. The same attribute tells a screen reader which item is current, so there is no separate "active" class to keep in sync.
anchor() and anchor-size() resolve to the item's edge and size. A longer label, a larger font or a wrapped line needs no new measurement.
The bar is one element whose inset and size change, so a plain transition slides it.
Rules
Keep anchor-scope on the component root. Without it an anchor name is global, and two navs on one page both follow the last active item.
The list needs position: relative, so the bar is positioned against the box that holds the items.
For a vertical list swap the axes. Use inset-block-start: anchor(top) and block-size: anchor-size(height), and transition those two.
Give the active item a second cue such as weight or color. A browser without anchor positioning drops the anchor() declarations and the bar has no width.
Use it for dialogs, popovers and anything else toggled with display. It replaces a script that adds classes and waits for transitionend.
Check Open and close both. In Chrome each one fades and rises in, then fades out before it is removed, and the dialog's backdrop fades with it. With Reduce Motion on they still fade, and do not move.
@starting-style gives the browser a "before open" state to transition from when the element leaves display: none. That is the entry.
allow-discrete on display delays the switch to display: none until the other transitions finish. That is the exit. overlay keeps the element in the top layer meanwhile.
The fade is not motion, so it runs for everyone. Only the slide sits inside the reduced-motion query.
Rules
Put @starting-style after the open-state rule. It has no extra weight in the cascade.
Never start from scale(0). If the element scales in, start at scale(0.95) with opacity: 0.
The dialog's ::backdrop needs the same three states and its own transition, as in the block. Without them it snaps while the dialog fades.
Write no fallback. Where the exit is not supported the element closes at once.
Keep [popover]:popover-open out of the selector list that opens the dialog. A browser that does not know one selector in a list drops the whole rule, and the dialog would open at opacity: 0. Inside @starting-style the shared list is safe, because every browser that reads the block knows the selector.
Support
Both directions in Chrome 117. In Safari 27 the entry animates and <dialog> and popovers close at once, tested in real Safari on 2026-10-01. An element toggled with a class animates both ways there. Firefox 129 animates the entry only.
Use it for dropdown menus and other popovers opened by a click. It replaces a positioning library or a script that reads getBoundingClientRect().
Check Open the menu in each corner. It opens 8px under the button, lined up with its start edge. Near an edge it flips to stay inside the frame, and the gap stays on the button's side.
Use it for FAQs and any other disclosure. <details> already gives you the toggle, keyboard support and find-in-page. These rules animate the open and the close with no JavaScript.
Check Open and close each one. In Chrome the height eases both ways and the text stays visible until it has closed.
::details-content is the box the browser wraps around everything in <details> except the <summary>.
interpolate-size: allow-keywords lets a transition run between a length and auto. It inherits, so one declaration on :root covers the page.
A closed <details> hides its content with content-visibility. Transitioning that property with allow-discrete keeps the content rendered until the height reaches zero. Leave it out and the close snaps.
Rules
Put padding on an element inside, never on ::details-content. Padding there stays visible when the accordion is closed.
Give sibling <details> the same name attribute to keep one open at a time.
Hide the marker with summary { list-style: none; } plus summary::-webkit-details-marker { display: none; } for Safari.
Write no fallback. Safari and Firefox do not support interpolate-size yet, so they open and close without the animation.
Support
::details-content in Chrome 131, Safari 18.4, Firefox 143. interpolate-size in Chrome 129 only.
Use it for dropdowns, menus and panels that open over the page and whose height is not known. It unrolls the panel without animating height, and it works in every browser.
Check Open and close the menu. It unrolls downward at its full size. Its shadow shows at the sides and the bottom and not along the top edge, and the text under it does not move. While it is closed, its links cannot be clicked or reached with Tab.
inset() clips from each edge, in the order top, sides, bottom. A bottom value of 100% hides the whole box. The percentage refers to the element's own height, so nothing has to measure it.
A negative inset widens the clip beyond the box. That leaves room for the shadow at the sides and the bottom. The top stays at 0, so no shadow shows where the menu meets its trigger.
Layout never changes. The panel has its full size the whole time and nothing around it moves.
The clipped part takes no pointer events, so a closed menu cannot be clicked.
visibility in the transition switches to hidden only when the close has finished. That takes the links out of the tab order.
Rules
The negative inset must be larger than the shadow's blur plus its offset.
Use it for panels that overlap the page. A closed panel in the normal flow leaves a gap, so an accordion uses Accordion that animates its height.
Add round with a radius inside inset() only when the clip itself should have round corners. The element's own border-radius still applies.
Use it for any horizontal row of cards. The carousel is a real scroll container, so swipe, trackpad, keyboard and momentum all work before any script loads.
Check Swipe, drag the trackpad, and press the arrows. Each stop lands a card on the left padding, and the arrows turn off at both ends.
Use it for the body of a modal, a chat list, a drawer or a sidebar. The panel grows with its content up to a limit, then the middle scrolls and the header and footer stay put.
Check Each panel is at most 80% of the frame's height. Its header and footer stay put and the list between them scrolls. The second panel has a form between the panel and the list, and behaves the same. Scroll a list to its end: the page behind does not move. Press Fewer rows: both panels shrink to their content and the scrollbar goes.
A flex item will not shrink below its content. A scroll container is the exception, with a minimum of zero, so the body shrinks to the space left and scrolls.
An element between the panel and the body, such as a form, is not a scroll container. It keeps the height of its content and pushes the footer out of the panel. min-block-size: 0 gives it the same zero minimum.
auto shows a scrollbar only when there is overflow.
scrollbar-gutter does not inherit. The reset's declaration on :root covers the page and no inner scroller.
overscroll-behavior: contain stops the scroll from passing to the page at the end of the list.
Rules
The panel needs a limit, either max-block-size or a height. With no limit nothing overflows.
.panel-wrap is only for an element that sits between the panel and the body. Leave it out when the body is a direct child.
A header or footer with a set height shrinks to its content when the body overflows. Give it flex: none, or size it with padding.
Keep min-height: 0 out of the reset. On every element it lets each item of a fixed-height column shrink under its own text.
The gutter takes the scrollbar's width on a short list as well. That is the price of no shift.
Support
scrollbar-gutter in Chrome 94, Firefox 97, Safari 18.2. overscroll-behavior in Chrome 63, Firefox 59, Safari 16. dvh in Chrome 108, Firefox 101, Safari 15.4.
Use it on any row that may or may not fit, such as tabs, a toolbar or a table wrapper. It fades the edges only when there is something to scroll to. It replaces a ResizeObserver that compares scrollWidth with clientWidth.
Check At full width both rows fit and nothing is faded. Make the frame narrower until they overflow. The first row fades at both edges. The second fades only the side that still has content: sharp at the start, then fading there too once you scroll.
A scroll timeline is inactive while its scroller has nothing to scroll. An animation on an inactive timeline has no effect, so the keyframes apply only when the content overflows.
In the first block from and to hold the same value. Scroll position changes nothing and the animation is an on/off switch.
The keyframes set a custom property, and custom properties inherit. The scroller and everything inside it can read the result.
A mask fades the content itself, so it works over any background. An overlay gradient has to match the color behind it.
Rules
Write animation-timeline after animation. The shorthand resets the timeline.
Declare the default outside the keyframes, as --fade: 0px does here.
Any value can go in the keyframes, including keywords. Stripe flips its navigation to row-reverse this way when a translation is too long to fit.
Write no fallback. Firefox has no scroll timelines, so the row scrolls there without the fade.
Support
animation-timeline in Chrome 115 and Safari 26. Firefox has it in Nightly only.
Use it on app-like pages with fixed UI, such as a sidebar or a sticky header. On macOS a trackpad scroll stretches the whole page past its edge and drags the fixed UI along.
Check Open it in its own tab and scroll past the top with a trackpad. The page does not stretch. On a touch device it still does.
css
html { overscroll-behavior-y: none; }
@media (any-pointer: coarse) {
html { overscroll-behavior-y: auto; }
}
Why it works
overscroll-behavior-y: none on the root turns off the bounce.
Touch devices get the default back, because pull to refresh depends on it.
any-pointer checks every input, where pointer checks only the primary one. A device with a touchscreen plus a mouse or stylus keeps pull to refresh. Jhey's example is a foldable.
Rules
Set it on html. The viewport takes its overscroll behavior from the root element.
Use the -y longhand. overscroll-behavior-x: none also turns off swipe to go back.
Give inner scroll containers, such as a sheet, a chat list or a sidebar, overscroll-behavior: contain. They keep their own bounce and stop the page behind them from moving. Never use a touchmove listener with preventDefault() for this.
Use it on fixed headers, bottom bars, toasts and sheets in anything that should feel like an app on a phone. Add viewport-fit=cover to the viewport meta tag, then pad those elements by the safe-area insets.
Check On a desktop every inset is 0px: the readouts say 0px, 0px and 16px, and only the sheet shows a sulphur band. Open it in its own tab on a phone with a notch or a home indicator. Wherever an inset is not 0px, a sulphur band of that size appears and the text stays clear of it.
By default the browser keeps the page inside the safe area and leaves the notch and home-indicator zones as bare background. viewport-fit=cover lets the page paint edge to edge.
env(safe-area-inset-*) gives the size of each zone, so the content moves clear while the background still fills the screen.
Rules
Without viewport-fit=cover every inset is 0px and the padding does nothing.
Give env() a fallback of 0px wherever it sits inside calc().
Normal page content needs none of this. The header's padding covers it.