What gradient types are supported?

Linear, radial, and conic gradients are all supported with live CSS output.

How many color stops can I add?

Up to 5 color stops. Each stop has a color picker and position slider.

Yes — click the Copy button to copy the gradient CSS to your clipboard.

Tools Color ToolsCSS Gradient Generator

Create beautiful CSS gradients with a live preview

Live Preview

Type

Direction

Color Stops (2/5)

#3b82f6

#8b5cf6

100%

Generated CSS

background: linear-gradient(to right, #3b82f6 0%, #8b5cf6 100%);

Was this tool helpful?

Step 1

Enter a color value or use the picker to select your starting color

Step 2

View conversions, palettes, or variations generated from your color

Step 3

See all color values and outputs displayed instantly

Step 4

Click any color value to copy it for use in your designs

Share this tool