CSS Gradient Generator creates linear and radial CSS gradients with unlimited color stops. For linear gradients, adjust the angle with a slider. Add, remove, and reorder color stops with position controls. The CSS background property updates live and is one click away from your clipboard.
Yes. Click 'Add stop' to add as many color stops as you need. Each stop has its own color picker and position percentage.
The tool outputs a complete background shorthand property, e.g. background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); — ready to paste into your stylesheet.
Linear gradients transition colors along a straight line at a chosen angle. Radial gradients transition outward from a center point in a circular or elliptical pattern, useful for spotlight or glow effects.
Each color stop has a position percentage (0-100%). Lower percentages place the color earlier in the gradient; you can create sharp transitions by setting two stops to nearly the same position.
Yes, stops can be added, removed, and their positions adjusted independently. The gradient preview updates live so you can fine-tune the order visually.
Yes, use the color picker's alpha channel to create stops with rgba() values, which lets gradients fade into transparency rather than a solid color.
linear-gradient() and radial-gradient() are supported in all modern browsers without prefixes. Very old browsers (IE10 and earlier) may need vendor prefixes, which this tool doesn't generate.
