CSS Gradient Generator
Build beautiful linear and radial CSS gradients with a visual editor.
Presets
135°
Color Stops
0%
100%
CSS Code
background: linear-gradient(135deg, #6b9cc5 0%, #a855f7 100%);
About CSS Gradient Generator
A visual CSS gradient generator that lets you build beautiful linear and radial gradients without writing code from scratch. Pick colors, adjust stop positions, set the angle or shape, and copy production-ready CSS with one click. Choose from preset gradients to get started quickly, or randomize for inspiration. Everything runs in your browser — no signup required.
FAQ
- What types of gradients can I create?
- You can create linear gradients (with any angle from 0° to 360°) and radial gradients (circle or ellipse shape). Both types support unlimited color stops at any position.
- How do I add more colors to my gradient?
- Click the "+ Add Stop" button to insert a new color stop. It automatically places itself in the largest gap between existing stops and blends the adjacent colors. You can then adjust the color and position.
- Can I copy the CSS code?
- Yes. The generated CSS is shown at the bottom and you can copy it with one click. The output is a standard CSS background property that works in all modern browsers.
- What does the Reverse button do?
- Reverse flips all your color stop positions — a stop at 20% moves to 80%, and vice versa. This mirrors the gradient direction without changing the colors.
- Do I need to worry about browser compatibility?
- No. The generated CSS uses standard linear-gradient() and radial-gradient() syntax supported by all modern browsers including Chrome, Firefox, Safari, and Edge.