css-tools.com logo CSS Tools
EN

CSS Gradient Generator

Build linear, radial and conic gradients visually and copy clean CSS. Stack several layers, add color stops with transparency and drag right on the preview to change the direction.

Black to white CSS Gradient

Each gradient can have several layers, and each layer has its own type, angle and colors. The result is plain CSS without vendor prefixes, ready to paste into your project. The page link saves your gradient, so you can share it or come back to it later.

How to Use the Gradient Generator

Choose a Gradient Type
Pick linear, radial or conic for each layer. Linear blends colors along a straight line, radial spreads them from a center point, conic rotates them around the center.

Adjust Colors and Layers
Click the color bar to add a color stop, drag it to change its position, and set any color with transparency. Use “Add Layer” to put another gradient on top.

Preview Your Design
Check the gradient on six shapes: full screen, square, horizontal and vertical rectangles, circle and star. You can also change the background behind the shape.

Add Layer

Gradient Direction
Drag on the preview. For linear and conic gradients this rotates the angle, for radial it moves the center.

Layers
“Add Layer” creates a new random gradient on top. Hide a layer with its toggle, or press and hold to delete it.

Gradient Type
Choose linear, radial or conic separately for each layer.

Angle
Type an exact value if you need precision.

Preview Shapes
Switch shapes at the top to see the gradient in different contexts.

background: linear-gradient(90deg, #000000 0%, #ffffff 100%);