Do I need vendor prefixes?

No. The unprefixed gradient syntax has been supported in every current browser for years, so the output is a plain background-image declaration. Adding prefixes today only makes the stylesheet larger.

When should I use radial or conic instead of linear?

Use linear for anything with a direction, such as a background wash or a fade-out overlay. Use radial for light spreading from a point, like a spotlight or glow. Use conic when the colour should sweep around a centre, which is what pie charts, colour wheels and progress rings need.

Why does my gradient look banded or muddy?

Banding usually shows up on a large area with a very subtle colour change, because there are not enough distinct steps to render smoothly; adding an intermediate stop helps. Muddiness typically comes from interpolating between two colours on opposite sides of the hue wheel, which passes through grey in the middle. Add a stop to steer the path.

Can I put text on a gradient?

Yes, but check contrast at both extremes rather than in the middle. A gradient that gives comfortable contrast at its light end may fail at its dark end. Adding a semi-transparent solid layer between the gradient and the text is a reliable fix.

Calculators & testers

CSS Gradient Generator

Build linear, radial or conic gradients and copy the CSS.

Type

Angle135°

Colour stops (2)

Position of the #1B365D stop0%
Position of the #0D9488 stop100%

A gradient needs at least two stops, so the last two cannot be removed.

CSS

background-image: linear-gradient(135deg, #1B365D 0%, #0D9488 100%);

Value only

linear-gradient(135deg, #1B365D 0%, #0D9488 100%)

Tailwind arbitrary value

bg-[linear-gradient(135deg,_#1B365D_0%,_#0D9488_100%)]

If text will sit on this, check its contrast at both the lightest and darkest points rather than in the middle — a gradient that reads well at one end often fails at the other.

About this tool

A CSS gradient is a smooth transition between two or more colours, generated by the browser rather than loaded as an image. Because it is drawn rather than downloaded, it costs no network request, scales to any size without losing quality, and can be changed by editing one line.

Writing gradient CSS by hand is fiddly in a way that is out of proportion to how simple the result is. The syntax has an angle or a shape, then a list of colours each with an optional position, and small changes to those numbers have effects that are hard to predict from reading the text. Building it visually and copying the finished declaration is simply faster.

The tool supports the three gradient types you actually use. Linear gradients run along a line at whatever angle you set, and cover most cases: hero backgrounds, button fills, fading overlays. Radial gradients spread out from a point, which suits spotlights and soft glows. Conic gradients sweep around a centre point, which is what you use for pie charts, colour wheels and progress rings.

You can add as many colour stops as you need, move them along the track, and change any colour, with the preview updating live. The generated CSS is a plain background-image declaration with no vendor prefixes, since every browser has supported the unprefixed syntax for years and the prefixed versions are now just noise.

One accessibility note worth keeping in mind: if text will sit on top of the gradient, check its contrast against the lightest and darkest points, not just the middle. A gradient that reads comfortably at one end can easily fail at the other.

How to use it

Pick a gradient type: linear, radial or conic.
Set the angle or position, then add and drag colour stops.
Copy the generated CSS declaration.

Frequently asked questions

Do I need vendor prefixes?: No. The unprefixed gradient syntax has been supported in every current browser for years, so the output is a plain background-image declaration. Adding prefixes today only makes the stylesheet larger.
When should I use radial or conic instead of linear?: Use linear for anything with a direction, such as a background wash or a fade-out overlay. Use radial for light spreading from a point, like a spotlight or glow. Use conic when the colour should sweep around a centre, which is what pie charts, colour wheels and progress rings need.
Why does my gradient look banded or muddy?: Banding usually shows up on a large area with a very subtle colour change, because there are not enough distinct steps to render smoothly; adding an intermediate stop helps. Muddiness typically comes from interpolating between two colours on opposite sides of the hue wheel, which passes through grey in the middle. Add a stop to steer the path.
Can I put text on a gradient?: Yes, but check contrast at both extremes rather than in the middle. A gradient that gives comfortable contrast at its light end may fail at its dark end. Adding a semi-transparent solid layer between the gradient and the text is a reliable fix.