CSS Gradient Generator
Easily create beautiful CSS gradients with this free online tool. Support linear and radial gradients, multiple color stops, and angle adjustment.
CSS Gradient Generator
Easily create beautiful CSS gradients with this free online tool. Support linear and radial gradients, multiple color stops, and angle adjustment.
About CSS gradients
Outputs a standard background declaration
Linear gradients use the selected angle in degrees, while radial gradients use the selected circle or ellipse shape. The copied result is a single background declaration that you can paste into a stylesheet.
Color stops are sorted by position
You can add multiple color stops, choose each color, and set its position from 0 to 100 percent. The generated CSS sorts stops by position before joining them, which keeps the gradient declaration predictable.
Three-color background: blue, purple, pink
Choose Linear and 90°. Set #2563eb at 0%, #7c3aed at 50%, and #ec4899 at 100%. The colors run from left to right; move the middle stop to change where purple appears. Paste this declaration into the CSS rule for your banner or card: background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
Radial glow: a light center on a dark background
Choose Radial and circle. Set #fef3c7 at 0%, #f59e0b at 35%, and #0f172a at 100%. This creates an opaque, centered glow, not a transparent overlay. Move the amber stop to adjust the transition; choose ellipse to stretch the shape with the container: background: radial-gradient(circle, #fef3c7 0%, #f59e0b 35%, #0f172a 100%);
Hard color split: two stops at the same position
Choose Linear and 90°. Keep two stops in this order: #0f172a at 50%, then #f8fafc at 50%. Equal positions remove the blend and create a sharp left/right boundary. Move both stops to 30% for a 30/70 split. This is one split, not repeating stripes: background: linear-gradient(90deg, #0f172a 50%, #f8fafc 50%);
FAQ
Common questions and answers about this topic.
What gradient types are supported?
Linear and radial gradients are supported, with full control over angle, shape, and color stop positions.
Can I add multiple color stops?
Yes, add as many color stops as needed with customizable positions to create complex gradient effects.
Does it generate cross-browser compatible code?
Yes, it outputs standard CSS gradient syntax that works in all modern browsers.
Is my data sent to any server?
No, gradient CSS generation happens entirely in your browser. Your color choices and settings are processed locally — nothing is sent to any server.