CSS Gradient Generator

Create beautiful CSS gradients visually. Choose colors, adjust angles, and get ready-to-use CSS code!

Type

Angle: 90°

Color Stops

100%

Presets

CSS Code

background: #667eea; /* fallback */
background: -webkit-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Features

Linear & radial gradients
Multiple color stops
Adjustable angle
Preset gradients
Random generator
Copy CSS code

How to Use

1
Choose gradient type (linear/radial)
2
Add and adjust color stops
3
Set angle for linear gradients
4
Copy the generated CSS

Frequently Asked Questions

How many colors can I use?

You can add up to 5 color stops for complex gradients.

What is a color stop?

A color stop defines a color at a specific position (0-100%) in the gradient.

What's the difference between linear and radial?

Linear gradients flow in a straight line. Radial gradients flow outward from a center point.

Is the CSS cross-browser compatible?

Yes! We include -webkit- prefix and fallback color for maximum compatibility.

Back to Design Tools