CSS Tools

Loading…

Twenty-seven tools that write CSS, and one rule about the picture

Each of these writes a rule you paste into a stylesheet: a fluid size, a curve, a shadow, a shape, a layout, a set of custom properties. They run as WebAssembly in this browser tab and upload nothing — which for a stylesheet matters less than it does for a contract, and still means there is no queue, no sign-up and nothing to agree to.

The rule that decides what all twenty-seven of them may show you is about the preview. A preview here is a drawing, made from the same numbers the rule carries, and not a browser laying that rule out. For a colour, a shape or a curve the two agree exactly. For anything that happens in a browser's compositor — a backdrop blur, a blend mode against what is behind it, a scrollbar — they do not, and those tools say so rather than drawing something close and letting you believe it.

The other rule is the arithmetic. Nothing here is computed in binary floating point, because the number goes into a file somebody reads: a clamp() whose slope arrives as 1.7999999999999998rem is a correct answer that no one will paste. The sizes, the ratios and the unit conversions are all exact decimals, and a point is four thirds of a pixel rather than 1.333333 of one.

Values come first: a fluid clamp() from two widths and two sizes, a specificity count that knows the three numbers are not a base-ten number, a size in every unit at once, Tailwind classes both ways, a stylesheet sorted into groups, an SVG as a background. Then motion — a curve with its overshoot named, keyframes, a loader, a transform — then the effects, then the shapes a border or a clip path makes, then the layout: flexbox, a media query, a scrollbar, a print stylesheet and a set of variables with their dark mode beside them.

Values and arithmetic

Fluid size
A size that scales between two screen widths, worked out exactly rather than in floating point.

Selector specificity
How loudly a selector claims a property — three numbers that are not one number.

Units side by side
One size in every unit it can be written in, with what each one is measured against.

Rules to classes
Declarations as the utility classes that stand for them, with the ones that have none named.

Sort a sheet
Declarations put in order, with the repeats that would change meaning kept the right way round.

Movement

Easing curve
The curve an animation follows, drawn with its two handles and written as CSS.

Keyframes
An animation from its steps, with every transform of one step written as one declaration.

Loading animation
A spinner in pure CSS, with the markup it needs and the label it must have.

Transforms
Move, turn, scale and skew, with the order rule that surprises everybody.

How a surface looks

Frosted panel
A panel that blurs what is behind it, with the fallback that keeps it readable where it cannot.

Soft shadows
A raised or pressed surface, with the two shadows taken from the background rather than from black and white.

Text shadow
One shadow or five, including the four-corner trick that draws an outline everywhere.

Filters
Brightness, contrast and the rest, with only the ones that do something written down.

Blend modes
What each mode does to two colours, worked out exactly for the twelve that can be.

Background pattern
A repeating pattern made of gradients, so that there is no file to load and nothing to go missing.

The shape of a box

Clip a shape
An element cut down to a shape, and the sentence about what else the cut takes with it.

Keep a proportion
A box that keeps its shape at any width, with the padding fallback whose percentage is of the width.

Cut text short
One line or several, with the ellipsis — and the sentence about what a screen reader still reads.

Text in columns
Columns by width rather than by count, with the rule that keeps a heading with its paragraph.

The page, not the box

Flexbox
Every property that does something, drawn, with the sentence that makes the two axes make sense.

Media query
A query from what it should depend on, with the breakpoint unit that follows the reader.

Style a scrollbar
The two ways a scrollbar can be styled, and which of them wins where both are read.

Styles for paper
The sheet a page needs on paper, with the at-rule that has to sit outside the media block.

Custom properties
A set of variables with a dark version whose lightness is turned over rather than inverted.

Questions

Which tools from the group are missing?
The ones that are really a browser: a live editor, a rendered screenshot, a responsive preview of somebody else's site, a minifier that has to parse every at-rule there is. Each needs an engine that lays the page out, which is a bigger thing than this whole application. What is here instead is the half of each job that is arithmetic and a rule being written.
Why is a preview a drawing rather than a rendering?
Because a rendering of a rule inside a WebAssembly canvas would be a second browser, and a bad one. Everything drawn here comes from the same numbers that go into the rule you copy, so the two cannot disagree — and where a drawing genuinely cannot stand in for the browser, the tool says so instead of guessing.
Why does the specificity counter disagree with the one I used before?
Probably about :where(), which is worth nothing at all, or about :is(), :not() and :has(), which are worth their most specific argument and not the sum of them. The other common disagreement is the comparison: the three numbers are a tuple and not a base-ten number, so eleven classes lose to one identifier here and win in a counter that adds up 100a + 10b + c.
Why will the blend-mode tool not show me hue, saturation, colour and luminosity?
Because those four are not defined channel by channel — they mix in a different space and need the whole colour of both layers at once. The twelve that are separable are computed here from the published formulae and agree with a browser exactly; the four that are not are named, with what each one takes from which layer, rather than approximated into a picture that would be wrong.