What is a CSS gradient generator?

A CSS gradient generator lets you pick colors and stops visually, then outputs linear-gradient, radial-gradient, or conic-gradient CSS you can paste into stylesheets or design tools.

What is the difference between linear and radial gradients?

Linear gradients transition along a straight line (controlled by angle). Radial gradients radiate outward from a center point — ideal for glows and spotlights.

Can I use three colors in one gradient?

Yes. Switch to 3-color mode or add up to five stops with custom positions for fine control.

Will my gradient print correctly in CMYK?

Neon RGB gradients often shift on press. For print work, verify key stops in the HEX to CMYK converter before production.

CSS Gradient Generator — Free Linear, Radial & Conic

Gradient type

Angle: 90°

Color stops

Position: 0%

Position: 50%

Position: 100%

Presets

CSS

background: linear-gradient(90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);
background: -webkit-linear-gradient(90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);
background: linear-gradient(90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);

Import colors from the palette generator. Bright RGB gradients may shift in CMYK print — verify before production.

Color tools

Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.

View all tools →

CSS gradient syntax quick reference

background: linear-gradient(135deg, #5B21B6 0%, #C4B5FD 100%);
background: radial-gradient(circle, #FFFFFF 0%, #7C3AED 100%);
background: conic-gradient(from 90deg, #FF512F, #F09819, #FF512F);

Import a palette from the color palette generator using the query link, or extract colors from a photo with the palette from image tool.

How stops, angles, and interpolation fit together

A CSS gradient is a list of color stops painted along a line, a ray, or an angle. The browser fills the space between stops. If you leave positions off, CSS Images Level 4 spaces the missing stops evenly between the ones you did set. That default is fine for a two-color wash. It puts a three-color highlight in the wrong place when you needed the middle color near one edge.

Linear gradients take an angle or a side keyword. 0deg points upward, 90deg points right, and 135deg is the diagonal used on a lot of hero sections. Radial gradients start at a center and move outward, which suits a glow or a vignette. Conic gradients sweep around a center, which suits a pie, a loading ring, or a color-wheel illustration. The same stop list can feed all three; the shape of the blend is what changes.

Two stops at the same position make a hard edge, because the blend between them has zero length. A color hint, written as a percentage between two colors with no color of its own, moves the midpoint of that blend without adding a third color. Both are specified in CSS Images Level 4. The generator on this page copies the CSS for the stops you set; it does not invent a hint for you.

sRGB interpolation between two saturated hues that sit far apart on the wheel often passes through a dull middle. CSS Color Level 4 lets you name an interpolation space, including Oklch. Provide a plain gradient first so browsers that do not understand in oklch still paint something. Read the longer version in the CSS gradients guide and the stop-by-stop notes in 7 practical ways to choose CSS gradient color stops.

Text on a gradient does not have one contrast ratio. WCAG 2.2 Success Criterion 1.4.3 compares text with the background behind it, and a gradient is many backgrounds. Sample the lightest and darkest points the glyphs can occupy in the contrast checker. If either fails, put the type on a solid card. For print, a continuous blend is a screen effect. Pull the stops you care about into flat colors and check them in the print gamut checker before you send a file to press.

FAQ

Frequently asked questions

Questions about CSS gradients and this generator.

What is a CSS gradient generator?: A CSS gradient generator lets you pick colors and stops visually, then outputs linear-gradient, radial-gradient, or conic-gradient CSS you can paste into stylesheets or design tools.
What is the difference between linear and radial gradients?: Linear gradients transition along a straight line (controlled by angle). Radial gradients radiate outward from a center point — ideal for glows and spotlights.
Can I use three colors in one gradient?: Yes. Switch to 3-color mode or add up to five stops with custom positions for fine control.
Will my gradient print correctly in CMYK?: Neon RGB gradients often shift on press. For print work, verify key stops in the HEX to CMYK converter before production.