Building CSS gradients
A gradient blends two or more colours across an element. Used as a background, it adds depth to a hero section, a button or a card without loading an image, and it scales perfectly to any screen size.
This generator builds linear and radial gradients. Set the angle, add colour stops and move them, watch the preview, and copy the background CSS.
How to use it
- Choose linear or radial.
- For a linear gradient, set the angle in degrees: 0 points up, 90 to the right, 180 down.
- Pick the colours and positions of the stops, from 0% to 100%, adding more for richer blends.
- Copy the CSS and paste it into your stylesheet as the background.
Example: the default diagonal
Linear, 135°, #6d28d9 at 0%, #06b6d4 at 100%
linear-gradient(135deg, #6d28d9 0%, #06b6d4 100%)
135 degrees runs from the top left to the bottom right, a common choice for hero banners.
Linear and radial
A linear gradient changes colour along a straight line at the angle you choose. A radial gradient spreads outwards from a centre point in a circle or ellipse, which works well for spotlights and soft vignettes. Both accept any number of colour stops, each with a position along the gradient.
Avoiding muddy middles
Blending two very different hues, such as blue and yellow, often passes through a dull grey in the middle, because browsers by default mix colours in the sRGB colour space. Two fixes: add a stop with a clean intermediate colour, or, in current browsers, interpolate in a perceptual space with linear-gradient(in oklch, …), which keeps the middle vivid.
Large, subtle gradients can show visible steps called banding, especially on low-quality screens. Adding a third stop or a little noise texture hides it.
Text on gradients
Check readability where text sits over the gradient, at both ends. A colour that contrasts well with one end may fail against the other; test both with the contrast checker, or add a darker overlay behind the text.
Questions
Can I use a gradient as a text colour?
Yes: set the gradient as the background, then add background-clip: text and color: transparent. Keep a solid fallback colour for older browsers.
Do gradients slow down pages?
No. They are drawn by the browser and cost far less than an image of the same size.
Is anything uploaded?
No. The CSS is generated in your browser.