CSS Gradient Generator
Build linear and radial CSS gradients visually with an adjustable angle and any number of color stops, previewing the result and copying the background code with one click.
FreeOnline Tool
Loading…
How to Use
Follow these steps to build a gradient in CSS:
- Choose a type: linear-gradient, or radial-gradient (fixed to a circle spreading outward).
- Set the angle: available for linear gradients only, using the slider to pick any direction from 0 to 360 degrees.
- Edit the color stops: two stops are provided by default, black at 0% and purple at 100%. Use the color picker to change a color and the slider to move the stop's percentage position. Click "+ Add stop" to add more colors; once there are more than two stops, an "x" button appears next to each one for deleting it (a minimum of two stops is always kept).
The preview shows the gradient live and the code box below stays in sync with the background: ...; declaration. Click "Copy CSS" to copy it.
Features
This tool switches freely between linear and radial gradients and supports any number of color stops (two or more), covering everything from a simple two-color fade to a complex multi-color blend.
- Linear gradients accept any angle from 0 to 360 degrees, while radial gradients spread outward from the center as a circle.
- There is no cap on the number of stops, and each one has its own color (via a hexadecimal color picker) and position percentage from 0% to 100%.
- Adding a stop generates a random color so you can experiment with multi-color effects quickly.
- The preview and the code box update together, so every change is visible immediately.
Use Cases
Buttons and cards
Mix an attractive gradient for a button or card background and export the CSS.
Hero section backgrounds
Create a multi-color gradient background for a page's hero area.
Trying different directions
Experiment with linear gradient angles to find the direction that looks right.
Glow effects
Design spotlight or glow backgrounds using a radial gradient.
FAQ
Can I set an angle for a radial gradient?
No. Radial gradients are currently fixed to a circle spreading outward from the center. Only linear gradients support an angle, and the angle control hides automatically when you switch to radial.
How many color stops can I add?
There is no hard limit — keep clicking "+ Add stop" as needed. That said, more stops make the transition more complex, so two to five usually gives the best visual result.
Can I delete stops until only one is left?
No. To keep the gradient valid the tool always keeps at least two stops, and the delete buttons are hidden once you are down to two.
Does the generated code work in older browsers?
The output is standard CSS3 linear-gradient and radial-gradient syntax, which every modern browser supports natively without vendor prefixes.