Gradient generator
Design linear and radial gradients with color stops and an immediate preview.
How it works & useful details
How to use this tool
Choose your start and end colors, direction and gradient type. Add a middle stop for more control.
Supported values and limitations
Exports CSS background declarations with two or three color stops. Alpha is preserved; the checkerboard underneath represents transparency and is not exported. Linear angles follow CSS: 0° points up and 90° points right.
About this tool
Gradient generator designs linear and radial gradients with editable color stops and an immediate preview. You can set the angle or center, add and reorder stops, and export the exact CSS.
The preview is scoped to the tool, and the generated declaration is plain CSS you copy into your project. Nothing is uploaded, and no design assets are required.
How to use it
- Choose a linear or radial gradient.
- Add color stops and position each one along the gradient.
- Adjust the angle or center point until the preview matches your intent.
- Copy the generated background declaration.
Worked example
background: linear-gradient(120deg, rgb(15 118 110) 0%, rgb(199 210 254) 100%);A 120° angle runs from the top-left toward the bottom-right. 0° points up and angles go clockwise, so 90deg runs left to right. Add a middle stop to pass through a third colour at a chosen position, or switch to radial for a glow that spreads from the centre.
Better-looking gradients
Gradients between complementary colours, such as blue to orange, can look muddy in the middle, because sRGB interpolation passes through grey. Adding a middle stop with a vivid in-between colour avoids that dead zone. Gradients between neighbouring hues, like teal to blue, are smooth without help.
When text sits on a gradient, check contrast at both ends, since a colour that passes on the dark end may fail on the light end. Large, subtle gradients can show visible banding on some screens. A little noise texture or a smaller colour range reduces it.
Frequently asked questions
How many color stops can I use?
The tool accepts multiple stops; keep the count reasonable so the gradient stays readable and performs well.
Why does the gradient look banded?
Gradients between very different colors can band on 8-bit displays. Adding a middle stop or subtle noise usually smooths it.
Can I use the result as a text fill?
Yes. The generated gradient can be applied with background-clip utilities where your design calls for gradient text.