Live CSS Preview

How to use it

1. Open Edit the CSS under any demo.
2. Change a value. The preview above it updates as you type, without restarting the animation.
3. Reset puts the original declarations back, so breaking one on purpose costs nothing.

Why a preview and not a screenshot

A screenshot of an easing curve is a picture of a square. The difference between ease-in-out and a custom cubic-bezier is entirely in the timing, which a still image cannot carry and a paragraph can only describe. The same is true of a container query: the point is that the card responds to its own width rather than the window's, and the only convincing way to show that is to let you drag the container.

That is why every CSS article on this site now carries the running version of what it describes, rather than a code block alone. Reading the declaration tells you what it says. Changing it tells you what it does.

What each demo is actually arguing

The easing demo runs four cards on the same distance and the same duration, so the only variable left is the curve. That is the point. Most easing arguments are really arguments about duration, and once you hold duration still the differences get small and specific: the overshoot card arrives and settles, the ease-in-out card arrives and stops dead. Set the third one to linear and it stops reading as motion design at all. Four numbers on a page cannot carry that, and neither can a GIF, because a GIF cannot be edited.

The container query demo exists because the feature is almost always explained with the wrong example. People demo it at page level, where it looks like a media query with extra steps. The interesting case is the one here: a card that has no idea how wide the window is and reflows on its own box, which is what lets the same component sit in a wide column and a narrow sidebar without a single breakpoint. Drag the slider and the window never changes size once.

The gradient mesh is the cheapest of the three and the one people copy most. Four radial gradients stacked over a dark base, no images, no canvas, no library. The stops matter more than the colors: move one of them a few percent and banding appears across the blend, which is the whole reason the values look arbitrary. They are not arbitrary, they are the result of somebody nudging them until the banding went away.

Common questions

Does anything I type get uploaded?

No. The editor writes into an iframe in your own browser tab and there is no network request involved, no account, and nothing stored on a server. Close the tab and it is gone.

Why does editing not restart the animation?

Because the tool swaps the contents of a single style element rather than reloading the preview document. Reloading would restart every keyframe on each keystroke, which makes tuning a motion demo impossible: you would only ever see the first 200 milliseconds of it.

Can I paste my own HTML, not just CSS?

Not in this version. The markup for each demo is fixed and only the stylesheet is editable, which keeps the thing honest as a CSS playground rather than a general scratchpad. If you need both, a local file and a browser does the job with no tool at all.

Why is the preview in an iframe?

Isolation. Several of the declarations worth demonstrating are hostile to the page around them, and a selector like * { transition: none } pasted into this document would take the site apart. Inside the frame you can type anything, including something broken, and the worst outcome is a broken preview.

Does it work with JavaScript disabled?

The preview does. Each frame renders its CSS on first paint, before any script runs, so you still see the effect. What you lose is the editing, which is the part that needs script.

Why does my animation ignore the timing I set?

Check whether your system has reduced motion enabled. Every preview here honours prefers-reduced-motion, so on a machine with it switched on the animations collapse to near-zero duration by design. That is correct behaviour, not a bug, and it is worth seeing what your own work looks like under it.

Once the declaration behaves, the next questions are usually sizing and color. Set your text sizes with the type scale calculator, check a pair with the WCAG contrast checker, or read how the curves here were chosen in our guide to easing curves.