CSS Gradient Generator
Make linear, radial and conic CSS gradients with draggable stops. Copy CSS or Tailwind, or share a link.
background: #6366f1; background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Presets
Type
Colour stops
CSS Gradient Generator FAQ
How do I create a CSS gradient?
Use background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); where the angle sets the direction and each colour has a position. Build it visually here, click Copy and paste it into your rule.
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line at an angle. A radial gradient spreads out from a centre as a circle or ellipse. A conic gradient sweeps around a centre like the hands of a clock, which suits colour wheels and pie charts.
How do I make a transparent gradient?
Lower the Opacity of a stop and the code uses rgba(), for example rgba(0, 0, 0, 0) to rgba(0, 0, 0, 0.75). The Photo fade preset does this, and the checkerboard or Photo backdrop shows what will show through.
Can I share a gradient I made?
Yes. Click Copy link: the gradient is stored in the address after the # sign, so anyone who opens the link sees the same gradient. Nothing is stored on a server.
Do I still need -webkit-linear-gradient?
No. Every current browser supports the standard syntax. The old prefixed form also measured angles differently, so 90deg pointed another way, which is why this tool leaves it out.
How do I use a gradient in Tailwind CSS?
Open the Tailwind tab and copy the class, such as bg-[linear-gradient(90deg,#6366f1_0%,#ec4899_100%)]. It works in Tailwind CSS v3 and v4 without changing your config.