What gradient types are supported?

Linear gradients (any angle) and radial gradients (circle or ellipse).

Can I add more than 2 colors?

Yes. Add up to 5 color stops to create complex gradients.

Is the CSS output cross-browser?

Yes. Modern gradient syntax works in all current browsers. No vendor prefixes needed.

CSS Gradient Generator

Create CSS linear and radial gradients with a visual editor. Copy the CSS code instantly.

Type

Angle135°

Color Stops

#667eea0%

#764ba2100%

CSS Output

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Presets

Frequently asked questions

CSS Gradient Generator — Visual Gradient Builder

Build beautiful CSS gradients with a visual editor. Choose colors, adjust angles, add stops, and copy the CSS code. Supports linear and radial gradients.

Visual editor

See the gradient update in real time as you adjust colors and angles.

Multiple stops

Add up to 5 color stops for complex gradients.

Copy CSS

One-click copy of the complete CSS background property.