Gradient Maker is a free color & design tool that runs entirely in your browser — cSS gradients with live stops. No upload, no account, no limits.
Design CSS gradients visually. Drag the handles on the ramp to move a color stop, click the ramp to add one, set each stop's opacity, and copy the ready-to-use CSS background value as you go. Linear, radial, conic and repeating gradients are all supported, plus a mesh mode that stacks soft radial blobs into one background.
Already have a gradient? Paste it into Import and it loads straight back into the stops, so you can edit the one that is already in your stylesheet instead of rebuilding it. Effects switches the interpolation space — OKLCH keeps a two-color ramp from sagging through gray in the middle — and bends the fade with an easing curve, baking the result into plain sRGB stops that work everywhere. Export writes the same gradient as CSS, Tailwind, SCSS, SVG, SwiftUI, Flutter or Android XML, or downloads it as a PNG, JPG or SVG at any size. Contrast sweeps the whole ramp against your text color and reports the worst reading it finds.
Linear, radial (circle or ellipse, positionable), conic, the repeating variant of each, and a mesh mode that layers soft radial blobs.
Yes — paste any linear/radial/conic-gradient(...) value into Import and it loads back into the stops, including hex, rgb(), hsl() and named colors, `to right` keywords and auto-spaced stops.
It blends in a perceptual color space, so a ramp between two colors keeps its chroma instead of passing through a dull gray band in the middle. If you need older browser support, bake it down to plain sRGB stops in one click.
Yes — every stop has its own opacity, and the output switches to rgba() automatically. Fading to a transparent version of the same color avoids the gray cast you get from fading to `transparent`.
Tailwind arbitrary values, an SCSS variable, SVG markup, SwiftUI, Flutter and Android XML — plus PNG, JPG and SVG downloads at any size up to 4096px, and ready-made snippets for gradient text, gradient borders and animated gradients.
The Contrast panel measures your text color against every point along the ramp and reports the lowest ratio with its WCAG AA/AAA verdicts.
Every calculation happens on this page, in your own browser. Your input is never sent to a server, never logged and never used for training — which also means the tool keeps working when you are offline.