Design Tools

7 visual CSS builders and color utilities — box shadows, gradients, border radii, CSS units, Tailwind palette, palette extraction.

Visual builders for the CSS values that are hard to write by hand

Some CSS values are easy to write — colors, font sizes, paddings. Others have so many interacting parameters that writing them by hand is mostly guessing and refreshing. Box shadows have offset-x, offset-y, blur radius, spread radius, color, opacity, and optional inset; getting the look you want often requires iterating through 20 combinations. Gradients have direction (or radial origin or conic angle), multiple color stops with positions, and optional repeating behavior. Border radii can have different horizontal and vertical radii per corner, producing organic shapes the spec calls "elliptical radii". Writing these by guess-and-check in a stylesheet and refreshing the browser is slow.

The design tools here replace the guess-and-check loop with live visual feedback. You drag a slider, the preview updates, you see the result, you copy the resulting CSS. Once the values are right, the workflow is back to ordinary CSS — paste, save, ship. No framework integration, no proprietary syntax, no design-tool format to export from. The output is the same CSS you would have written by hand, just faster to arrive at.

The set covers the visual builders (Box Shadow Generator, Gradient Generator, Border Radius Generator) plus the unit and color utilities that designers and developers keep needing: CSS Units Converter for px↔rem↔em↔% conversions, Tailwind Color Picker for browsing and copying the default Tailwind v4 palette, and Color Palette Extractor for pulling dominant colors from any uploaded image (useful for sampling from brand references or design screenshots).

Two tools that are sometimes considered "design" but live elsewhere on this site: the Favicon Generator (in image tools, because the input is an image), and the SVG Optimizer (also image tools, because SVG is an image format). For text-shape utilities like lorem ipsum and case conversion, see text tools.

All design tools

Box Shadow Generator

Visual CSS box-shadow builder with offset, blur, spread, color, and inset

Gradient Generator

Build linear, radial, and conic CSS gradients with multi-stop color control

Border Radius Generator

Visual border-radius builder with per-corner control and elliptical radii

CSS Units Converter

Convert between px, rem, em, %, vh, and vw with configurable root font-size

Tailwind Color Picker

Browse the Tailwind v4 default color palette and copy HEX, RGB, HSL, or CSS variable

Color Palette Extractor

Extract the dominant colors from an image as a HEX palette

Mermaid Renderer

Render Mermaid diagram source (flowcharts, sequence, ER, Gantt) to SVG or PNG

Frequently asked questions

Why use these CSS builders instead of writing CSS directly?

For exploration, mostly. Box-shadow values have 4–5 sliders that interact in non-obvious ways; seeing the result update live as you drag is much faster than guessing values, building, and refreshing. Same for gradients — getting a 3-stop conic gradient that looks right is iterative. Once you have the values you want, copy the generated CSS and paste it into your stylesheet. The output is plain CSS, no library wrappers, no framework-specific syntax.

Does the Color Palette Extractor work for any image?

Yes. Drop any JPG, PNG, or WebP and the tool extracts the N most dominant colors using k-means clustering with k-means++ initialization. The default produces 5 colors, configurable up to 12. The output is HEX values you can copy. Useful for sampling colors from a brand reference, a moodboard image, or a screenshot of a design you want to match.

How are the Tailwind Color Picker values kept current?

They're literally the default palette from Tailwind v4 (the version in this site's package.json). When Tailwind updates the palette in a future version, we update this tool. The output formats — HEX, RGB, HSL, CSS variable — all reference the same underlying value; pick whichever your project uses.

Why is there a CSS Units Converter?

Because px ↔ rem conversions trip up everyone who works with responsive typography. The conversion depends on the root font size (default 16 px in most browsers, sometimes overridden in a project's base CSS). The tool exposes the root size as a slider so you can verify the conversion against your specific setup. It also covers em, %, vw, vh, ch, and a few others.

Can I use the gradient and shadow output in non-CSS contexts?

The output is CSS syntax — works directly in stylesheets, CSS-in-JS libraries (styled-components, emotion), Tailwind arbitrary values (e.g. shadow-[the-output-here]), and modern CSS-in-JS systems. For non-CSS contexts (SVG drop-shadow, native iOS UIShadowPath, Android elevation), you'll need to convert the offset/blur/color values into the appropriate format — the underlying values are the same, just the syntax differs.