CSS Gradient Generator

Design linear or radial gradients with up to 5 stops, tune angles and copy clean CSS in one click.

Gradient stops

2/5
CSS output
/* Fallback for browsers that do not support gradients */
background-color: #4F46E5;

/* Legacy WebKit */
background-image: -webkit-linear-gradient(135deg, #4F46E5 0%, #EC4899 100%);

/* Modern browsers */
background-image: linear-gradient(135deg, #4F46E5 0%, #EC4899 100%);
CSS angle
deg
Bottom right

Selected stop

0%
Position0%

Color stops

1
2

Presets

The most pleasant gradients keep hue rotation small (under 60°) and avoid muddy midpoints. If you blend complementary colors, push one stop closer to the edge so the gradient doesn't spend too long in the gray midtones.

Frequently asked questions

How do I add a third color to a gradient?+

Click + Add stop and place it where you want. You can have up to 5 stops in this generator.

What is the difference between linear and radial?+

Linear gradients fade along a line at a chosen angle. Radial gradients fade outward from a center point, which gives a spotlight effect.

Can I use these gradients in Tailwind?+

Yes — paste the CSS into a custom utility or use the bg-[...] arbitrary-value syntax.

Related tools

Color Converter
Convert any color between HEX, RGB, HSL, HSV and CMYK.
HEX to RGB
Convert HEX color codes to RGB instantly.
RGB to HEX
Convert RGB color values to HEX codes.
Palette Generator
Generate beautiful 5-color palettes in seconds.
Contrast Checker
Check WCAG AA / AAA contrast for text and backgrounds.
Image Color Picker
Extract dominant colors from any image.