CSS gradient generator

Design linear and radial gradients and copy the CSS.

Runs on your deviceFreeNo account

How to use Gradient generator

Choose colors, angle, and linear vs radial. The preview fills a large card. Copy the `background-image` CSS. Use the contrast note as a reminder: fancy gradients often fail accessibility under small type.

Pick two or more colors, set an angle, and preview a live gradient. Copy CSS for backgrounds, buttons, and hero panels. Keep contrast in mind if you put text on top.

Also searched as gradient generator, css gradient, color gradient. All processing for this tool happens in your tab unless labeled otherwise.

Questions

Can I add more stops?

Yes — add stops and drag their positions.

Tailwind?

Copy the raw CSS. Tailwind’s built-in gradients are more limited than arbitrary values.

Export PNG?

Download a PNG snapshot of the preview if you need a raster fill.

Related tools

More generators people open next.

Meta tag generatorBuild title, description, and social preview tags for a webpage.Image compressorShrink image file size with a live quality preview.SVG to PNGRasterize vector SVG artwork to a PNG at any size.QR code generatorCreate a high-resolution QR code for a URL, text, or Wi-Fi hint.Password generatorGenerate random passwords with length, symbols, and memorable options.Lorem ipsumGenerate placeholder paragraphs, lists, or titles for mockups.