CSS Gradient Generator
Build beautiful CSS gradients visually and copy the code
background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
Linear, radial, conic, and the banding problem
A CSS gradient fills an element with a smooth color transition, the cheapest way to add visual interest without shipping an image. The tool gives you a visual editor: pick two or more colors, drag the stops, choose the gradient type, and copy the CSS it writes.
Which gradient does what
- Linear runs along a straight line you aim with a keyword or an angle, the workhorse for button fills, hero sections, and background washes.
- Radial spreads outward from a center you can place anywhere, which suits spotlights, focal points, and soft glows.
- Conic sweeps around a center like a color wheel. The tool focuses on linear and radial, but conic-gradient ships in every modern browser, so you can hand-write it from the same stops.
Stops, hints, and why bands appear
Each color sits at a position from 0 to 100 percent, and the midpoint between two stops is an even blend. Hand-written CSS can skew that midpoint with a color hint, a bare percentage placed between two stops; the tool writes plain stops, so add a hint to the copied CSS yourself when you want one. Banding, those visible steps across a wide subtle gradient, comes from the screen's 8-bit color depth rather than the CSS. A faint noise overlay hides it for graphic work; in plain CSS you mostly accept it.
Gradient questions
- Can a gradient fade to transparent?
- In CSS, yes. The tool's color pickers produce solid 6-digit hex values, so build the gradient here, copy the CSS, and hand-edit a stop to rgba() or 8-digit hex. The gradient then blends through the alpha, which is how a fade-to-transparent image overlay is built.
- Is a CSS gradient better than an image of one?
- For flat color transitions, almost always. The CSS is a few hundred bytes, scales to any size, and stays sharp on retina screens, where an image is kilobytes and blurs when scaled. Save images for photos and complex artwork.
- Will it look the same across browsers?
- Close. The gradient spec is stable and renders alike in modern browsers, and the only drift is the color-profile difference between displays, which affects images too.