CSS Gradient Generator
Pick colors, set angle or radial origin, see the gradient live. Copy clean CSS for any framework — Tailwind, vanilla, or whatever you're using.
135°
CSS
How CSS gradients work
A gradient is a series of color stops along a line (linear) or radius (radial). The browser interpolates colors between adjacent stops.
linear-gradient(135deg, #14B8A6 0%, #5B5BD6 100%)
radial-gradient(circle at center, #14B8A6 0%, #5B5BD6 100%)Angle conventions
- 0deg = bottom-to-top
- 90deg = left-to-right
- 180deg = top-to-bottom (default)
- 270deg = right-to-left
Tips
- Stop positions are percentages — multiple stops at the same position make sharp transitions.
- Hard stops (e.g.
red 50%, blue 50%) create solid bands instead of fades. - Multi-gradient backgrounds stack with commas:
background: g1, g2; - CSS variables work inside gradient functions, so you can theme by swapping vars.