CSS Gradient Generator
Build a linear or radial CSS gradient with multiple color stops and copy the code.
Results are provided as is, for general information. Check anything important before relying on it. See the Terms of Use.
About this tool
A CSS gradient is a `<gradient>` value — not an image — computed by the browser from a direction (or shape) and a list of color stops, each stop a color plus the percentage along the gradient line where it sits. This tool builds either a linear-gradient() at any angle from 0-360° or a radial-gradient() in a circle or ellipse shape, with up to eight color stops you position by dragging. The preview updates live and the CSS panel always shows a ready-to-paste `background: …;` declaration. Everything happens in your browser — nothing is sent anywhere.
When to use it
Questions
Why is a CSS gradient not an image?
The browser computes it at render time from the function and its arguments — there's no bitmap involved, no network request, and it scales to any size with zero loss of quality or added file weight. That also means it participates in `background-size`, can be layered with other backgrounds using comma-separated values, and re-renders instantly if you change a custom property it references.
How does the angle in linear-gradient() work?
0deg points up (bottom to top), and the angle increases clockwise — 90deg points right, 180deg points down, 270deg points left. This is different from standard math angle convention (counterclockwise from the positive x-axis) and different from `transform: rotate()`, which is a common source of confusion. This tool's live preview is the fastest way to build intuition for a specific angle rather than deriving it from the rule.
What's the difference between linear and radial gradients here?
linear-gradient() paints in straight bands along one direction (the angle). radial-gradient() paints outward from a center point in either a perfect circle or an ellipse that stretches to match the element's aspect ratio — useful for spotlight or vignette effects, or a soft glow behind a centered element. Both share the same color-stop model; only the direction/shape argument differs.
Do color stops have to be evenly spaced?
No — each stop's percentage is independent, and bunching stops close together creates a sharp transition (even a hard edge, at the same percentage) while spreading them out creates a slow blend. This tool lets you drag each stop's position freely; a common technique is two stops at nearly the same percentage to fake a hard color line inside an otherwise smooth gradient.
Can I use rgba() or a CSS variable for transparency in a stop?
Yes in your own stylesheet — a transparent or semi-transparent stop is how you fade a gradient into whatever's behind it. This tool's color picker only produces solid hex colors (the browser's native `<input type="color">` has no alpha channel), so build the opaque gradient here and hand-edit a stop to `rgba(...)` or a variable afterward if you need transparency.
Why does my gradient look banded instead of smooth?
Banding is usually a display/color-depth artifact, not a CSS bug — it's most visible with two very different hues over a large area on an 8-bit display. Adding an intermediate stop that's a rough midpoint of the two colors (rather than relying on the browser's raw linear interpolation) softens the visible bands; some designers also add a very subtle noise texture as a separate layer to break up the transition entirely.
How do I combine a gradient with a regular background image?
List them comma-separated in one `background-image` (or shorthand `background`), gradient first: the first layer paints on top. A common pattern is a semi-transparent-to-transparent linear-gradient() over a photo to guarantee text legibility, e.g. `background: linear-gradient(rgba(0,0,0,.6), transparent), url(photo.jpg);`.
Is there a performance cost to using a CSS gradient instead of an image?
Gradients are cheaper: no HTTP request, no decode step, and modern browsers render them on the GPU. The one case where they can cost more is a very large area repainting every frame during an animation (e.g. animating a gradient's angle) — if that shows up as jank, animating a `transform` on a pseudo-element instead of the gradient itself is usually cheaper.