CSS & design
Generate gradients, shadows, radii and shapes as copy-ready CSS.
Written for: Developers and designers · Everyone else, quickly
What this family is for
These tools turn a few options into the CSS you would otherwise hand-tune in a text editor: a gradient with its stops, a box shadow with the right spread, a border radius for one corner, a triangle built from borders. Each one shows the value live and hands you the exact declaration to paste, so you spend the time designing rather than guessing at numbers.
Generating CSS versus testing CSS
These tools fall into two groups. The generators — gradient, box-shadow, border-radius, triangle — produce a declaration you paste. The checkers — contrast — evaluate a colour pair against a standard. Mixing them up wastes time: a gradient generator cannot tell you whether your text will be readable, and a contrast checker cannot produce a gradient.
The generators share a design decision worth knowing: each produces a single, self-contained declaration with no vendor prefixes and no fallback chain. That is deliberate. A prefix from 2012 does nothing useful in a modern browser and makes the output harder to read; if you need a fallback, the browser’s own cascade is the place to put it.
| If you have… | Use | Because |
|---|---|---|
| A background gradient | CSS gradient generator | Linear or radial, with colour stops you can position |
| A drop shadow | Box shadow generator | Offsets, blur, spread and colour in one declaration |
| Rounded corners | Border radius generator | Per-corner control including elliptical radii |
| A CSS triangle | Triangle generator | The border trick, with the arithmetic already done |
| To know if text is readable on a background | Contrast checker | WCAG ratio, not a visual guess |
4 tools in CSS & design
Common mistakes with these tools
- Judging contrast by eye — Perceived contrast and the WCAG ratio disagree, especially for mid-tone colours. A ratio of 4.5:1 is the AA threshold for body text and is not obvious visually.
- Copying a shadow without its colour — A box-shadow with no colour uses currentColor, which changes with the text colour — a shadow that looks right in one theme can vanish in another.
- Using a gradient as a background image on text — The declaration works, but text over a busy gradient needs its own contrast check; the gradient tool does not evaluate that.
Frequently asked questions
Is the generated CSS ready to use as-is?
Yes. Each tool emits a complete, valid declaration or rule using standard CSS — no prefixes or vendor hacks — which you can paste straight into a stylesheet or a style attribute.
Which browsers support these features?
Gradients, box-shadow, border-radius and the border-triangle trick are supported in every current browser and have been for years. The output deliberately avoids newer syntax so it works everywhere without a fallback.
Does the tool need an internet connection?
No. Everything is computed from the options you set, in the page, with no network request — so the tools work offline once loaded.
Other tool families
- Scripts & numerals — Digits, writing systems and transliteration, converted losslessly. (7 tools)
- Encoding & Unicode — What the bytes and code points of your text actually are. (7 tools)
- Accents & diacritics — Strip the marks that break search, matching and filenames. (1 tools)
- Phonetic & symbol writing — Spell text in other symbolic systems: Morse, Braille, radio alphabet. (3 tools)
- Text utilities — Everyday clean-up: counting, case, whitespace, slugs and lines. (15 tools)
- Developer & data — Encode, format and generate the values developers pass between systems. (24 tools)
- Time & date — Timestamps and dates, converted without a timezone surprise. (4 tools)
- Converters & calculators — Unit, money and grade calculators that show the method, not just the answer. (14 tools)
- Colour — Move a colour between HEX, RGB and HSL without a design tool. (3 tools)
- Images — Resize, convert, compress, crop and inspect images without uploading them. (15 tools)
- Documents — Business paperwork — invoices, receipts — generated in the browser. (2 tools)
- QR & codes — Machine-readable codes: QR, barcodes, and the subtitle formats players read. (3 tools)