Free CSS Gradient Generator
Create beautiful CSS linear and radial gradients visually. Add multiple color stops, adjust the angle and direction, and copy the ready-to-use CSS code.
CSS Code
About the CSS Gradient Generator
This free CSS gradient generator lets you create linear and radial gradients visually without writing a single line of code. Add as many color stops as you need, drag sliders to set their positions, and adjust the gradient angle or direction. The tool outputs clean, cross-browser CSS that you can paste directly into your stylesheet.
It supports both linear-gradient() and radial-gradient() with optional circle or ellipse shapes. The generated CSS uses the modern syntax supported by all current browsers.
How to Generate a CSS Gradient
Choose Type
Select Linear for a directional gradient or Radial for a center-outward circular/elliptical effect.
Set the Angle or Shape
For linear gradients, drag the angle slider. For radial gradients, choose circle or ellipse.
Adjust Color Stops
Click any color swatch to pick a color. Drag the position slider to move the stop. Add more stops with the + button.
Copy the CSS
Click the Copy button in the code output block and paste it into your CSS file.
Frequently Asked Questions
You can add up to 10 color stops. CSS supports many more, but for practical design use, 2–5 stops are most common. The minimum is 2 stops to create a valid gradient.
Yes. The output uses the standard unprefixed syntax supported by all modern browsers (Chrome, Firefox, Safari, Edge). Legacy IE support is not included as IE is end-of-life.
Yes. The output CSS is a background property value. You can also use it as a background-image, border-image, or anywhere CSS accepts gradient values.
A radial gradient radiates outward from a central point. Colors transition from the center to the edges. It is useful for spotlight or glow effects and soft background textures.