CSS Gradient

Build a CSS gradient visually and copy ready-to-use code.

Step one — Type & direction

Angle

Step two — Color stops

Drag a handle to move it · click the bar to add a stop.

Step three — Blend mode

Interpolate in

What is a CSS gradient?

A CSS gradient is a smooth blend between two or more colors that the browser draws with no image file. This builder lets you set the colors and direction visually, then copies clean code you can paste straight into a stylesheet.

How to build one

Add color stops and set each color.
Drag the stop positions to control where colors blend.
Choose linear, radial or conic and set the angle.
Copy the generated CSS from the box below.

Gradient types

For a dedicated radial or conic setup, use the Radial Gradient or Conic Gradient tools. To pick the stop colors first, the Color Picker gives you exact values.

Can I use more than two colors?

Yes. Add as many color stops as you like, each with its own position.

Does a CSS gradient need an image?

No. The browser renders it from code, so it stays sharp at any size and adds no download.