Skip to content
HQ8T

CSS Gradient Generator

Linear, radial and conic gradients with preview.

Type
Colours
0%
100%
background: #6366f1;
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

How to use

  1. 1Choose linear, radial or conic.
  2. 2Pick colours and drag their positions; add up to 6.
  3. 3Set the angle or start from a preset.
  4. 4Copy the CSS into your stylesheet.

Frequently asked questions

Why are there two background lines in the CSS?

The first is a solid colour fallback for very old browsers; modern browsers use the gradient line.

Can I use it in Tailwind?

Yes. Paste the gradient into an arbitrary value like bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)].

What is a conic gradient?

Colours rotate around a centre point, like a colour wheel or pie chart.

Do gradients work in all browsers?

Yes. Linear, radial and conic gradients work in all current browsers, including on phones.

You may also need