How is browser compatibility?

CSS linear-gradient and radial-gradient are supported in all modern browsers. IE 9 and below do not support them, so add a fallback background color if needed.

Can I type color codes manually?

Yes, you can type HEX codes directly in addition to using the color picker for precise color control.

How many color stops can I add?

There is no limit in the CSS spec, but 2 to 5 color stops typically look the most natural. Too many stops can make the gradient look cluttered.

CSS Gradient Generator

Edit linear/radial gradients visually and copy CSS code

Preset

Type

Angle135°

Colors (2/8)

#667eea0%

#764ba2100%

CSS

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

Overview

Writing CSS gradients by hand means refreshing every time you tweak a color or angle. This tool lets you adjust color stops, direction, and type (linear or radial) with your mouse while seeing the result update live. When you are happy with the gradient, copy the CSS code in one click.

Key Features

Both linear and radial gradient types supported
Add, remove, and reposition color stops
Adjust direction (angle) with a slider in real time
One-click copy of the final CSS code
Preset gradients to start from

How to Use

Choose the gradient type: linear or radial.
Add color stops and adjust each color and position.
For linear gradients, set the direction with the angle slider.
Preview the result and copy the CSS code.

Tips

Start with 2 color stops and add more gradually for a natural-looking gradient.
Use transparent as a color stop to create fade effects.
Gradients can also be applied to border-image and text, not just backgrounds.

FAQ

How is browser compatibility?: CSS linear-gradient and radial-gradient are supported in all modern browsers. IE 9 and below do not support them, so add a fallback background color if needed.
Can I type color codes manually?: Yes, you can type HEX codes directly in addition to using the color picker for precise color control.
How many color stops can I add?: There is no limit in the CSS spec, but 2 to 5 color stops typically look the most natural. Too many stops can make the gradient look cluttered.