CSS Gradient Generator

How to use the CSS Gradient Generator

1. Select a gradient type: linear or radial.
2. Add color stops by clicking the add button, and choose colors using the color picker.
3. Adjust the position of each color stop and the gradient angle or direction.
4. Preview your gradient in real time on the display area.
5. Click the copy button to copy the generated CSS to your clipboard.

Linear vs. radial, and when to use each

Linear gradients (the most common) transition colors along a straight line at a chosen angle, good for backgrounds, buttons, and most decorative effects. Radial gradients transition outward from a center point, useful for spotlight or vignette effects. Both are widely supported across all browsers and cover the vast majority of gradient use cases you'll encounter in web design.

Frequently asked questions

Does it output CSS that works across browsers?

The generated linear-gradient()/radial-gradient() syntax is standard modern CSS supported by all current browsers without vendor prefixes. Prefixes were needed years ago but are no longer necessary for any browser still in meaningful use.

Can I add more than two color stops?

Yes, add as many color stops as you need, each with its own position percentage along the gradient.

Why does my gradient look different in different browsers?

Slight color-space rendering differences between browsers/OSes can shift perceived color subtly, but the actual CSS values are identical. This is a rendering nuance, not a code error.