Design CSS gradients visually: build linear or radial gradients with angle and color stops, preview them live and copy the generated CSS.
All calculations happen locally in your browser. Nothing leaves your device.
CSS gradients are images generated by the browser at render time — no files, no requests, resolution-independent. Three standard syntaxes cover nearly every visual need, and they all share the same color-stop pattern: a list of color position% pairs that the browser blends between.
| Function | Shape of the blend | Typical use |
|---|---|---|
linear-gradient() | Colors blend along a straight line at an angle | Backgrounds, buttons, headers, text fills |
radial-gradient() | Colors blend outward from a center point in circles/ellipses | Glow effects, vignettes, soft spotlights |
conic-gradient() | Colors sweep around a center point like a wheel | Spinners, pie charts, color-wheel UIs |
A linear gradient blends colors along a straight line at an angle (90° goes left to right, 0° goes bottom to top). A radial gradient blends from a center point outward in circles or ellipses. A conic gradient sweeps colors around a center point like a color wheel — perfect for spinners and pie charts. This tool generates linear and radial; the conic syntax follows the same stop pattern.
The angle is measured clockwise from the bottom edge: 0° points up, 90° points right, 180° points down, 270° points left. So the default 90° is the classic left-to-right blend. You can also use keywords like to right or to top left instead of a number.
A color stop is one color plus its position along the gradient, given as a percentage from 0% (start) to 100% (end). The browser interpolates smoothly between consecutive stops. Two stops at 0% and 100% give an even blend; adding a stop at 50% forces the midpoint color to land exactly in the middle.
Yes, for the standard linear-gradient() and radial-gradient() syntax every modern browser — Chrome, Firefox, Safari, Edge — renders them identically. Gradients are one of the most stable CSS features and need no vendor prefixes anymore. This tool generates standard syntax only.
Not the colors directly — background-image is not animatable. The common trick is to make the gradient element larger than its container and animate background-position, or to cross-fade two gradient layers with opacity. The CSS you copy here is a single static gradient, which is the base for any of those tricks.
Building a whole component next? Lay it out with the Flexbox Generator or the CSS Grid Generator, give it depth with the Box Shadow Generator, and soften the corners in the Border Radius Generator.
If you just finished with CSS Gradient Generator, the natural next steps are Color Palette Generator, Color Converter, Color Contrast Checker, or browse every tool in Privacy File Tools.