CSS gradients replaced what used to require an actual exported image file — a smooth blend between two or more colors — with a few lines of stylesheet code the browser renders on the fly. This tool builds that code visually, letting you drag color stops and preview the result before copying the CSS.
From background images to a CSS primitive
Before gradients were part of CSS, designers who wanted a smooth color blend on a webpage had no choice but to export a PNG or JPEG from Photoshop and set it as a background-image — heavier to download, blurry when stretched, and impossible to tweak without reopening the design file. WebKit (the engine behind early Safari and Chrome) shipped an experimental, vendor-prefixed -webkit-gradient() syntax around 2008; Mozilla followed with its own -moz-linear-gradient. The competing syntaxes were eventually reconciled and standardized by the W3C as the CSS Image Values and Replaced Content Module, giving browsers the unprefixed linear-gradient() and radial-gradient() functions in near-universal use today.
How this generator constructs the output
The tool lets you place any number of color "stops" — a color plus a position along the gradient — and an angle (for linear gradients) or shape and position (for radial ones), then assembles the exact CSS function syntax browsers parse: comma-separated color-stop pairs inside linear-gradient(angle, color1 position1, color2 position2, …). Because it's plain CSS text, the output can be pasted directly into a stylesheet with no image asset required.
Where gradients are used today
- App and website backgrounds — the "gradient mesh" aesthetic that swept product design in the late 2010s and 2020s (Stripe, Instagram, countless SaaS landing pages) is built almost entirely on layered CSS gradients.
- Buttons and UI depth — subtle gradients simulate light and shadow to make flat interface elements feel slightly three-dimensional.
- Text and icon effects — combined with
background-clip: text, a gradient can fill typography itself rather than just a background box. - Data visualization — gradients encode continuous numeric ranges (heatmaps, progress bars) far more efficiently than a discrete row of solid colors.
Frequently asked questions
Linear vs. radial — what's the difference? A linear gradient blends along a straight line at a specified angle; a radial gradient blends outward from a center point in a circle or ellipse — the CSS syntax differs (angle vs. shape/size/position) but both accept the same comma-separated color stop list.
Do gradients affect page performance? Negligibly — unlike an exported gradient image, a CSS gradient has effectively zero file size and is rendered by the GPU, generally making it both lighter and sharper at any screen resolution.
Can I animate a gradient? Directly animating gradient color stops isn't supported by CSS transitions in most browsers; the common workaround is animating a background-position on an oversized gradient, or layering multiple gradients and fading their opacity.
Further reading
MDN — linear-gradient() — Full syntax reference including angle keywords and multi-stop gradients.
W3C — CSS Image Values Module Level 3 — The specification standardizing gradient syntax across browsers.