CSS gradient generator

CSS gradient generator features

• 01

  Linear, radial, and conic

  Linear is the everyday background gradient; radial is great for highlights and vignettes; conic is perfect for pie charts, color wheels, and rotating backgrounds.

• 02

  Up to six color stops

  Add and remove stops, set each one's position with a slider, and pick its color via the system color picker or a hex value. Stops re-sort by position automatically.

• 03

  Copyable CSS declaration

  The output is a complete background: ... declaration that you can paste straight into a stylesheet, a styled component, or a Tailwind arbitrary-value class.

CSS gradient generator FAQ

What's the difference between linear, radial, and conic?

Linear gradients run in a straight line at a given angle; radial gradients spread outwards from a center; conic gradients sweep around a point like a clock hand. Each one suits a different visual effect.

How many color stops should I use?

Two stops is the classic two-color gradient. Three or four lets you create realistic transitions (sunset, aurora). More than six tends to look noisy — that's why this generator caps at six.

Can I use this for backgrounds in an email template?

Most email clients still don't support modern CSS gradients reliably — provide a solid fallback color in addition to the background gradient if you copy this into an email template.

Is the output pixel-accurate?

Yes — the preview is rendered by the browser's native gradient engine, so what you see is what your CSS will produce.