What is the CSS Gradient Generator?#
The CSS Gradient Generator builds linear, radial, and conic gradients and copies them as CSS or a Tailwind v4 class.
The preview updates with every change, so the copied code matches what is on screen. Presets and shuffle are there when you want a starting point.
How to Use#
- Pick a gradient type and set its angle, shape, or origin.
- Arrange the colors: click the color bar to add a stop, drag a stop to move it.
- Copy the code as CSS or a Tailwind class.
Opacity, position, and the output options apply right away. A preset replaces the current gradient in one click, and shuffle makes a fresh combination while keeping the same type.
Gradient Types and Settings#
- Linear: runs in one direction set by an angle.
- Radial: spreads outward from an origin point. A circle keeps a round spread while an ellipse stretches with the element.
- Conic: sweeps around an origin point, which suits rings and pie-style fills.
- Color stops: each stop holds a color, an opacity, and a position, and at least two are needed. A stop added from the color bar or the add operation samples the gradient at that point, so the preview barely moves. Stops can also be spaced evenly or mirrored.
- Output: CSS writes a background-image declaration. Tailwind writes a v4 class: simple linears become direction utilities, everything else becomes one arbitrary-value class.
- Color notation: Hex or OKLCH. Opacity folds into the color itself.
Common Use Cases#
- Button and card backgrounds with a quiet two-color blend.
- Hero sections that fade from a brand color into the page background.
- A radial highlight behind a pricing or feature block.
- Conic sweeps for pie-style fills, dials, and decorative rings.
FAQ#
Tailwind v4. Direction utilities use the v4 bg-linear-to-* names. On a v3 project, that prefix becomes bg-gradient-to-* while the from/via/to parts stay as they are.
Recent versions of the major browsers. Older ones ignore the declaration, so the background falls back to nothing. The Hex output covers the widest range of browsers.
A new stop samples the gradient at the point where it lands, blending its neighbors in proportion to that position. Semi-transparent stops blend with the colors behind them, and the page background shows through where the gradient itself is transparent.
Diagonal direction classes such as bg-linear-to-br are tied to two corners, so the visual angle shifts with the element's proportions. A wide banner and a square card render the same class at different angles. Edge directions such as bg-linear-to-r keep a fixed angle. For an angle that never depends on the element, the CSS output and the arbitrary-value class both work well.
Notes#
The CSS output leaves the interpolation color space unset, so each browser renders with its own default. Tailwind direction utilities pin Oklab instead, which can render slightly differently.