CSS Gradient Generator

Developer Utilities

Design linear or radial CSS gradients with a live preview and copy-ready CSS.

How to use

Build a gradient

Pick linear or radial, adjust the angle for linear gradients and choose the start and end colors. The preview and CSS update live.

Choose linear or radial.
Set the angle and two colors.
Copy the generated CSS declaration.

Using the CSS

The output is a single background declaration. Paste it into a CSS rule, inline style or style block.

Frequently asked questions

What does the angle mean?

The angle controls the direction of a linear gradient in degrees, where 0deg points up and 90deg points right.

Can I add more color stops?

This generator creates two-stop gradients. Add extra stops manually to the copied CSS.

Related tools

Color Palette Generator Generate tints, shades, analogous, complementary and triadic palettes from any color. CSS Box Shadow Generator Craft box shadows with sliders for offset, blur, spread and color, then copy the CSS. Color Converter Convert colors between HEX, RGB and HSL with a live preview swatch. UUID / GUID Generator Generate random version 4 UUIDs and copy them one by one or in bulk. Hash Generator Compute MD5, SHA-1, SHA-256 and SHA-512 digests of any text. Timestamp Converter Convert between Unix timestamps, ISO 8601 and human readable local dates.