Design beautiful linear and radial CSS gradients visually. Create smooth color transitions for backgrounds, buttons, and UI elements with our free Gradient Generator.
Master the Art of Gradients
Gradients are a staple of modern web design, adding depth, vibrancy, and visual interest to otherwise flat interfaces. However, writing the `background-image: linear-gradient(...)` syntax by hand is tedious and unintuitive. You have to calculate angles, manage color stops, and handle browser compatibility prefixes.
Our CSS Gradient Generator simplifies this process. It provides a Photoshop-like interface where you can add colors, drag stops to adjust ease, and rotate the angle—all while seeing the result in real-time.
Key Features
🎨 Visual Editor
Click to add new color stops, drag to position them, and delete what you don't need. It's fully interactive.
🔄 Linear & Radial
Switch between Linear (straight lines) and Radial (circular) gradients to suit your design needs.
📐 Angle Control
Set the precise direction of your gradient using the angle dial (e.g., 45deg, 90deg, to bottom right).
🧙♀️ Presets
Stuck for inspiration? Choose from a library of professionally curated gradient presets to get started fast.
How to Use
- Add/Select Stops: Click on the gradient bar to add a color stop. Click an existing stop to select it.
- Choose Color: Use the color picker to set the color for the selected stop.
- Adjust Position: Drag the stops left or right to control where the color transition happens.
- Set Angle: Rotate the dial to change the direction (Linear only).
- Copy CSS: Get the cross-browser compatible CSS code instantly.
CSS Gradient Syntax
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
This creates a horizontal gradient (90 degrees) starting with dark blue, transitioning to deep blue at 35%, and ending in cyan at 100%.
Frequently Asked Questions
What browsers are supported?
Our tool generates standard CSS3 code supported by all modern browsers. It can also include old vendor prefixes (-webkit-, -moz-) if requested.
Can I use transparent colors?
Yes! You can use RGBA colors with alpha transparency to create fade-out effects or overlays.