02 · Gradient studio
CSS gradient generator. Build it, ship the CSS.
background: linear-gradient(90deg, #845EC2 0%, #D65DB1 50%, #FF6F91 100%)
Color stops
Type & direction
CSS output
background: linear-gradient( 90deg, #845EC2 0%, #D65DB1 50%, #FF6F91 100% );
Guide
CSS gradients: linear, radial, conic and repeating
A CSS gradient paints a smooth transition between two or more colors directly in the background property — no image files, no extra requests. A linear gradient runs along an angle (0deg points up, 90deg to the right), a radial gradient expands from a center point in a circle or ellipse, and a conic gradient sweeps around a center like the hands of a clock. The repeating variants tile the gradient in fixed-size bands for stripes and patterns.
Each color stop marks a position along that path: the gradient interpolates between stops, so moving two stops closer together hardens the transition while spreading them softens it. Swatchboard previews the result at full width while you edit, and every stop can be recolored, repositioned, added or removed with a click.
How to write a gradient that ships
Two to five stops are usually enough; more stops invite banding and make the gradient hard to tune later. Keep the angle deliberate — 180deg fades top to bottom for headers, 90deg runs left to right for buttons, and 45deg reads as motion. If text sits on the gradient, check the lightest and darkest points of the transition against your text color with the contrast checker, because the midpoint often fails even when both endpoints pass.
The CSS output panel here gives you both the full background declaration and a one-liner ready to paste. Browser support for linear, radial and conic gradients is universal in modern engines, so a single declaration needs no vendor prefixes today.
Frequently asked questions
- How do I make a CSS gradient?
- Pick your stops and gradient type on this page, then copy the generated background declaration. Manually it reads background: linear-gradient(90deg, #845EC2 0%, #FF6F91 100%); — the first argument is the angle or shape, followed by color stops with optional positions.
- What angle should a gradient use?
- 0deg points up, 90deg to the right, 180deg down. Use 180deg for top-to-bottom fades, 90deg for left-to-right, and 135deg for a diagonal. The angle is measured clockwise from up, so pick one that reinforces the direction of your layout.
- Do CSS gradients work in all browsers?
- Yes in every current browser. Linear, radial and repeating gradients have been unprefixed for years; conic gradients are also broadly supported now. Only very old Internet Explorer versions need a fallback background color.