Watch each trick breathe
Every demo runs in an isolated sandbox: the real motion, the real timing, exactly what lands in your codebase.
Rotating Glow Border with @property
A conic gradient can start at any angle, and until that angle is a registered custom property the browser refuses to interpolate it — so the border jumps instead of sweeping. Declare it with @property and one spinning gradient serves a card, an avatar ring and a button, each changing only its palette, speed and direction. The halo is the same gradient again, blurred behind the edge. Worth knowing: inherits is a required descriptor, not an optional one. Leave it out and the whole rule is invalid, --a never registers, and every gradient silently computes to none.
Two-Handle Price Filter From Real Inputs
Every shop has a two-handle price filter and no HTML element does it, so people reach for a slider library or fake the whole thing with divs — and throw away keyboard support on the way. Stack two real range inputs on one track instead. pointer-events: none lets a click fall straight through the invisible tracks, pointer-events: auto on the thumbs keeps each one grabbable, and that pair is the entire trick: arrow keys, Home/End, Tab focus and aria all still work. One fill div reads both values, each input clamps against the other so the handles cannot cross, and the higher one sits on top or its thumb goes unreachable at the far end.
Drag-to-Reorder That Opens a Gap
What sells a sortable list is not the row you are holding — it is what the other rows do. Swap them the instant you cross a boundary and the list flickers; instead, every row past the drop target shifts by exactly one row height, and the gap that opens up is the drop indicator. Two details carry it: transform rather than top or margin, so the shift stays composited at fifty rows, and a short transition, because anything over about 0.2s lags behind your finger and reads worse than no animation at all.
Even Flex Lines with flex-wrap: balance
Greedy wrapping fills the first line and strands whatever is left, which is how a four-item nav ends up three across with one alone underneath. flex-wrap: balance asks the browser to spread the items evenly over the lines it needs instead — four items become two and two. Drag the panel's right edge to move the wrap point and watch the two lists disagree. Chrome 150 is the first to ship it, so the balanced list falls back to wrap elsewhere and says so.
Fade-Up Scroll Reveal with view()
A reveal that needs no observer and no scroll listener. animation-timeline: view() hands an ordinary @keyframes block a timeline built from the element's own visibility, so each card fades and rises as it enters the scrollport. animation-range: entry ends that timeline once the card is in, and `both` keeps the finished state instead of playing it backwards on the way out.
Block Text Selection with user-select
One declaration decides whether a pointer drag paints a text selection or does what your UI meant it to do. user-select: none is what keeps a drag handle, a reorderable row or a game surface from turning into a highlighted mess halfway through the gesture. The lock here is a checkbox and :has(), so switching it is pure CSS — try selecting the text in both states.
Readable Labels with contrast-color()
Pass a background to contrast-color() and it hands back black or white, whichever stays readable on it. The four swatches and every step of the ramp below carry the same one-line declaration — no colour was paired by hand, and none was measured. The ramp is there to find the seam: somewhere along it the label flips, and the browser decides where.
Blend Any Two Colours with color-mix()
Mixing two colours used to mean a preprocessor function or hand-computed hex values. color-mix() does it in the browser: name a colour space, two colours, and how much of the first one you want. Drag the slider and watch the result bar and the declaration change together — the bar's background is the very color-mix() call printed underneath it.
Dark Mode in Two Lines of CSS
No theme classes, no localStorage, no toggle wired to a click handler. color-scheme: light dark tells the browser this page renders either way, and light-dark() picks the right value per property — so the page follows the operating system on its own. The demo flips the container's own color-scheme so you can watch both halves without touching system settings.
Clamp a Paragraph to N Lines
Cutting a preview to a fixed number of lines used to mean measuring text and slicing strings. Three declarations do it instead: display: -webkit-box with a vertical box-orient lets -webkit-line-clamp cut at whatever line you name, and the browser adds the ellipsis. The line count here is a custom property, so the same rule serves every card.
Native Popover Dialog, No Library
A button with popovertarget and an element with popover is the whole implementation. The browser puts it in the top layer, closes it on Escape, closes it when you click outside, and hands you ::backdrop to style — none of which you wrote. The script here only opens it on a loop so the demo plays; the open and close buttons are pure markup.
Composer That Opens on :focus-within
The toolbar and submit button stay out of the way until the field they belong to is actually in use. :focus-within matches an element while focus sits anywhere inside it, so the wrapper can expand its own actions row the moment the textarea takes focus — collapsing max-height and opacity, no state to track.
Steal like a professional
Self-contained HTML, CSS and JS, written to be copied and pasted straight into your own project.