Gradient Generator
Build linear and radial CSS gradients visually, adjust the angle and color stops, then copy the ready-to-use code.
Color stops
Generated CSS
Designing with gradients
Gradients add depth that a flat color cannot. A subtle two-stop fade makes a hero section feel less flat; a bright multi-stop blend becomes a brand statement. The trick is control: pick the type, set the direction, and place each color exactly where you want it. This generator writes valid CSS the moment you move a slider, so you can experiment without memorising the syntax.
Reading the syntax
A linear gradient is linear-gradient(angle, color1 pos1, color2 pos2, ...). The
angle points in the direction the colors travel, and each stop names a color and where it
lands as a percentage. A radial gradient swaps the angle for a shape and position:
radial-gradient(circle at center, ...). You can chain as many stops as you like,
though two to four covers most real designs.
Practical tips
- Keep stops in ascending order, or the blend can look reversed or banded.
- For a smooth fade, use two stops at 0% and 100%. For a hard split, place two stops at the same position.
- Very saturated color pairs can muddy in the middle; a mid stop in a related hue fixes it.
- Radial gradients make natural spotlights and soft page backgrounds.
Choosing your colors is easier with a palette in front of you - grab values from the color picker or turn one brand color into a full range with the shade generator. If the gradient sits behind text, run the end colors through the contrast checker so the copy stays readable.