CSS gradient generator

Create linear, radial and conic CSS gradients with a live preview.

  • Development
  • 100% free
  • No sign-up
  • Runs in your browser
CSS gradient generator
deg
Reset

What is the css gradient generator?

The CSS gradient generator builds linear, radial and conic gradients from two or three colors, with a live preview. Set the angle and copy the CSS, which includes a solid fallback color.

Gradients are drawn by the browser, so they look sharp on every screen and weigh nothing compared with background images.

How to use the css gradient generator

  1. 1Choose the gradient type and the angle.
  2. 2Pick two or three colors.
  3. 3Copy the CSS into your stylesheet.

Features

Three types

Linear, radial and conic.

Live preview

See the gradient while you edit.

Fallback color

A solid color for very old browsers.

Transparent colors

RGBA and 8-digit HEX colors are supported.

Frequently asked questions

Do CSS gradients work in all browsers?

Yes, linear and radial gradients work everywhere; conic gradients work in all modern browsers.

How do I make a gradient text?

Set the gradient as background, then add background-clip: text and color: transparent.

What does the angle mean?

0deg goes from bottom to top, 90deg from left to right, and 135deg diagonally.

Can I add more colors?

Yes, add more colors separated by commas in the copied CSS.