All tools

CSS

Gradients, shadows and clip paths.

CSS generators exist because the syntax is easy to get subtly wrong: gradient angles start at the top and turn clockwise, shadow offsets take four lengths in a fixed order, and a value that is merely invalid fails silently rather than complaining. Each tool here builds the declaration from the grammar published by the W3C and shows you the exact text to paste.

Suggest a tool

Tell us what is missing and where its numbers should come from.

What should it convert, calculate or generate, and where would the authoritative numbers come from? A link to the standard or publication that defines them is the most useful thing you can send.

Write to us

Opens your mail app with this page already filled in.

How these tools are built

Every tool in this category runs entirely in your browser: there is no upload, no account and no request to a server once the page has loaded. The numbers behind them are transcribed from the organisation that defines them โ€” NIST for units, the W3C for web formats, the WHO for health measures โ€” and each page names its source next to the formula. A tool whose reference values stop reproducing fails the build and does not ship, which is the whole reason the catalogue grows slowly.

Other categories