All tools › The page, not the box
Media query
A query from what it should depend on, with the breakpoint unit that follows the reader.
It runs entirely in this browser tab: the CSS you paste is never uploaded, and the preview is drawn from the same numbers the rule carries rather than rendered by the browser — which is why a tool whose effect only exists in a compositor says so instead of drawing one.
Settings
- From this width
- `rem` follows the reader's own text size; pixels do not.
- Up to this width
- Left empty, there is no upper bound at all.
- Orientation
- Choices: Any, Taller than wide, Wider than tall.
- Pointing device
- A mouse is precise and a finger is not; a menu that only opens on hover has neither. Choices: Any, A mouse or a pen, A finger, None.
- Colour scheme
- Choices: Any, Light, Dark.
- Stop for reduced motion
- The block that stops the animation for somebody who asked their machine for less movement.
- Only when printed
- On or off. Starts off.
How to use it
- Paste your text into the box above, or open a file.
- Adjust the settings beside it until the result is what you wanted.
- Copy the result, or save it as a file. The result updates as you type.
Questions
- Is what I paste uploaded anywhere?
- No. The whole application is carried as WebAssembly and runs on your own device. There is no server to send a stylesheet to, and no tool here makes a network request while it works.
- Is the preview what my browser will actually draw?
- For a colour, a shape and a curve, yes — it is drawn from the same numbers the rule carries. For anything a browser's compositor does against the page behind it — a backdrop filter, a blend mode, a scrollbar — no, and that tool says so on its own result rather than showing you an approximation.
- Why does a size come out as 1.125rem and not 1.1250000000000002rem?
- Because none of the arithmetic is done in binary floating point. Every length here is an exact decimal, so a conversion ends where it should: 18px is 1.125rem and 24px is 18pt, with no run of nines and no stray four at the twelfth place.
- Can I use these rules without attribution?
- Yes. What comes out is CSS — a declaration is not a work with an owner, and nothing here writes a comment into your stylesheet about where it came from.
Other tools for the page, not the box
Flexbox
Every property that does something, drawn, with the sentence that makes the two axes make sense.
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.
All twenty-seven tools