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.

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.