100% local · no upload

CSS Gradient Builder

Build linear, radial or conic CSS gradients with multiple color stops, custom angle and live preview. Copy the CSS in one click.

TypeLinearRadialConic

Angle

Color stops

100%

CSS

background: linear-gradient(90deg, rgb(59 130 246) 0%, rgb(139 92 246) 100%);

How it works

Drop your file or paste your content into the tool above.
Adjust the options — every change updates the preview instantly.
Download the result. Your file never leaves your browser.

Your files never leave this page

Every conversion runs entirely in your browser using WebAssembly. There is no upload, no server-side processing, no analytics, and no cookies. Open DevTools → Network during the operation and you will see zero outbound traffic.

Related tools

Color ConverterConvert any CSS color between HEX, RGB, HSL, HSV and OKLCH. Paste a color in any common format — everything is computed locally in your browser.
Contrast CheckerCheck WCAG color contrast between two colors. Get the ratio plus AA / AAA verdicts for normal and large text — everything runs locally in your browser.
Palette from ImageExtract the dominant colors from an image. Pick k-means or median-cut, choose 2–16 swatches, then copy as CSS variables or JSON. Your image never leaves your browser.
Tints, Shades & TonesGenerate tints (toward white), shades (toward black) and tones (toward gray) from any base color. Great for design systems.

Topics covered

css gradient generator
linear gradient online
radial gradient online
conic gradient online
gradient builder free
css gradient maker