Which gradient types are supported?

Linear (direction-based), radial (circular or elliptical), and conic (angular sweep). All three are standard CSS3 and supported in every modern browser.

How do I add more than two colors?

Use the "Add stop" button to add additional color stops. Each stop has a color and a position between 0 and 100 percent. You can have up to 8 stops.

What browsers support conic gradients?

Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. For older browsers, stick with linear or radial gradients.

Can I save my gradient?

The generator outputs a CSS declaration you can copy into your stylesheet. Bookmarking the full URL does not preserve state currently.

CSS Gradient Generator

Build linear, radial, and conic CSS gradients with live preview

Your data never leaves your device

Gradient type

Angle: 45°

Color stops (2/8)

Preview

CSS output

background: linear-gradient(45deg, #ff6e7f 0%, #bfe9ff 100%);

Presets

Frequently Asked Questions

Which gradient types are supported?

Linear (direction-based), radial (circular or elliptical), and conic (angular sweep). All three are standard CSS3 and supported in every modern browser.
How do I add more than two colors?

Use the "Add stop" button to add additional color stops. Each stop has a color and a position between 0 and 100 percent. You can have up to 8 stops.
What browsers support conic gradients?

Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. For older browsers, stick with linear or radial gradients.
Can I save my gradient?

The generator outputs a CSS declaration you can copy into your stylesheet. Bookmarking the full URL does not preserve state currently.