Gradient Generator
How to use
Visually builds CSS linear or radial gradients with multiple color stops and an adjustable angle, showing a live preview as you design it. Copy the generated CSS straight into your stylesheet.
Gradient Type
Color Stops
CSS Code
- Designing a hero section or banner background without hand-writing gradient syntax
- Building a button hover effect that transitions smoothly between brand colors
- Prototyping a radial spotlight effect for a card or feature callout
- Fine-tuning an existing gradient by visually adjusting stop positions instead of guessing percentages
How a CSS gradient is built, and why some go grey in the middle
A CSS gradient is a list of colour stops, each a colour at a position from 0 to 100%, and the browser blends between neighbouring stops. A linear gradient blends along a line at the angle you set: 90° runs left to right, 180° top to bottom. A radial gradient blends outwards from the centre in a circle. The generator writes exactly that as one background declaration you can paste into any stylesheet, and every current browser supports it without prefixes.
Browsers blend gradients in the sRGB colour space by default, and that is why a gradient between two saturated opposites, such as blue and yellow or red and green, often passes through a dull grey in the middle. Halfway between the two in sRGB numbers is a colour that looks muddy to the eye. The practical fix is to add a third stop in the middle with a bright colour that sits between them in hue, for example a teal between blue and yellow. The result reads as a smooth, vivid transition.
Stop positions control where a transition happens, not just which colours appear. Two stops close together make a sharp band. Stops spread evenly make a gentle wash. Placing the same colour at two neighbouring positions creates a solid stripe with no blending at all. The generator sorts stops by position before writing the CSS, so you can add them in any order.
Free and private. Everything runs on your own device, with no account and no uploads.
This tool provides a visual builder for CSS linear and radial gradients, letting you drag color stops, adjust their position and angle, and copy the resulting CSS background property. It removes the guesswork of hand-writing gradient syntax and is handy for designing hero sections, buttons, or backgrounds. The live preview and generated code update in real time, entirely within your browser.
Yes, you can toggle between linear and radial gradient types at any time.
You can add as many stops as you like, with a minimum of two required to form a gradient.
Yes, it outputs standard linear-gradient() and radial-gradient() CSS syntax supported by all current browsers.
No, gradients exist only in your current browser session; copy the CSS code if you want to keep it.
- 1
Choose gradient type
Select linear or radial gradient style.
- 2
Set the angle (linear only)
Drag the angle slider to rotate the gradient direction.
- 3
Adjust color stops
Change stop colors and drag their position sliders to fine-tune the blend.
- 4
Add more stops if needed
Click Add Stop for a multi-color gradient.
- 5
Copy the CSS code
Grab the generated background CSS to paste into your stylesheet.
- ·Copy the CSS as soon as you're happy with a gradient, nothing is saved between sessions.
- ·Use more than two color stops for smoother multi-color transitions instead of stacking multiple gradients.
- ·For radial gradients, remember the angle control doesn't apply since radial gradients spread from a center point instead.