CSS Gradient Generator

Design beautiful CSS gradients with a live preview. Choose colors, adjust positions, and copy the generated CSS for your project.

Gradient Type

Angle

135°

Color Stops

Presets

Generated CSS

How to use this tool

Choose between Linear or Radial gradient.
Adjust the angle for linear gradients.
Modify color stops — change colors and positions. Add or remove stops as needed (2–8 stops).
Try a preset for quick inspiration, or click Random for a surprise.
Copy the Generated CSS and paste it into your stylesheet.

Can I use the generated CSS in any project?

Yes. The output is standard CSS that works in all modern browsers. Simply copy the background property and apply it to any element in your CSS.

How many color stops can I add?

You can have between 2 and 8 color stops. A minimum of 2 is required to create a gradient. More stops allow for more complex color transitions.