What can it generate?

Linear, radial and conic gradients, with as many colour stops as you need, an adjustable angle for linear gradients, and a live preview. The output is a ready CSS declaration you can paste into a stylesheet.

When should I use a conic gradient?

When the colour should sweep around a centre rather than across or outward from it. Pie and donut charts, colour wheels, and circular progress indicators are all achievable in pure CSS with one, which avoids an image or a canvas for something purely decorative.

Why does my gradient look muddy in the middle?

Because interpolating between two opposite hues passes through a desaturated midpoint. Add an intermediate stop in a hue that lies between the two and the middle regains its saturation. This is the most common complaint about gradients and the fix is reliable.

How do I make a hard edge instead of a fade?

Put two stops at the same position. The colour changes abruptly there rather than blending, which is how stripes, segmented bars and flag-like patterns are built with a single gradient.

Does a gradient hurt performance?

No. It is drawn by the browser from a short declaration, so there is nothing to download and it scales to any size without loss. That makes it cheaper than a background image for the same effect, and it stays sharp on high density displays.

Can I put text over a gradient?

Yes, but check contrast at the extremes rather than in the middle. The background varies along its length, so text that is readable over one end can fail over the other. A semi-transparent overlay between the gradient and the text is the usual way to guarantee a minimum contrast.

How do angles work in a linear gradient?

The angle describes the direction the gradient travels, measured clockwise from pointing upwards. So zero degrees runs bottom to top, ninety degrees runs left to right, and one hundred and eighty degrees runs top to bottom. Keyword directions such as to right are equivalent and sometimes clearer to read.

Why do I see visible bands in a subtle gradient?

Banding happens when the colour change across the area is spread over fewer steps than the display can show smoothly, and it is most noticeable in large areas of a nearly flat gradient. Adding an intermediate stop, or introducing a very slight amount of noise, both reduce it.

Can I animate a gradient?

Gradient stops are not directly animatable in CSS. The usual approaches are to animate the background position of an oversized gradient, to cross-fade between two elements, or to animate a custom property in browsers that support registered properties. None of them need a different gradient definition than the one produced here.

Are the colours I pick sent to a server?

No. The preview and the CSS are generated in your browser, and nothing you enter is transmitted, stored or logged.

CSS Gradient Generator – Linear, Radial and Conic

CSS Gradient Generator

// PREVIEW

Type

Angle

135°

// COLOR STOPS

100%

// PRESETS

// CSS OUTPUT

background: linear-gradient(135deg, #00ff88 0%, #0088ff 100%);

// CSS Gradient Generator: Features

The three gradient types

A linear gradient runs along a straight line at whatever angle you set, and covers most practical uses: page backgrounds, buttons, overlays. A radial gradient spreads outward from a point, which suits spotlights, vignettes and soft focal highlights. A conic gradient sweeps around a centre point like a clock hand, which is how pie charts, colour wheels and loading indicators are built in pure CSS. Switching between them keeps your colour stops, so comparing is a single click.

Colour stops and their positions

Each stop is a colour and a position along the gradient. Two stops give a simple blend; more let you control where the transition happens rather than accepting an even spread. Placing two stops at the same position creates a hard edge rather than a fade, which is how stripes and segment boundaries are made. Dragging positions against the live preview is considerably faster than writing percentages and reloading.

The grey dead zone, and how to avoid it

Blending between two saturated colours of opposite hue in the default colour space passes through a desaturated middle, which is why some gradients look muddy at the centre. The usual fix is to add an intermediate stop in a hue that sits between them, which pulls the midpoint back towards saturation. Modern CSS also allows interpolation in other colour spaces, which addresses it more directly, though browser support is newer.

Performance and accessibility

A CSS gradient is generated by the browser, so it costs nothing to download and scales to any size without softening, unlike a background image. Two things to watch: text placed over a gradient has varying contrast along its length, so check the worst case rather than the average, and a very subtle gradient can band visibly on low colour-depth displays, where adding an intermediate stop usually helps.

Choosing the colours before building the gradient

The preview and the CSS are produced locally, so unreleased brand colours can be used here without being transmitted, stored or logged. To settle on the individual colours first, the Color Converter makes adjusting lightness and building a consistent set straightforward.

// CSS Gradient Generator: FAQ

What can it generate?: Linear, radial and conic gradients, with as many colour stops as you need, an adjustable angle for linear gradients, and a live preview. The output is a ready CSS declaration you can paste into a stylesheet.
When should I use a conic gradient?: When the colour should sweep around a centre rather than across or outward from it. Pie and donut charts, colour wheels, and circular progress indicators are all achievable in pure CSS with one, which avoids an image or a canvas for something purely decorative.
Why does my gradient look muddy in the middle?: Because interpolating between two opposite hues passes through a desaturated midpoint. Add an intermediate stop in a hue that lies between the two and the middle regains its saturation. This is the most common complaint about gradients and the fix is reliable.
How do I make a hard edge instead of a fade?: Put two stops at the same position. The colour changes abruptly there rather than blending, which is how stripes, segmented bars and flag-like patterns are built with a single gradient.
Does a gradient hurt performance?: No. It is drawn by the browser from a short declaration, so there is nothing to download and it scales to any size without loss. That makes it cheaper than a background image for the same effect, and it stays sharp on high density displays.
Can I put text over a gradient?: Yes, but check contrast at the extremes rather than in the middle. The background varies along its length, so text that is readable over one end can fail over the other. A semi-transparent overlay between the gradient and the text is the usual way to guarantee a minimum contrast.
How do angles work in a linear gradient?: The angle describes the direction the gradient travels, measured clockwise from pointing upwards. So zero degrees runs bottom to top, ninety degrees runs left to right, and one hundred and eighty degrees runs top to bottom. Keyword directions such as to right are equivalent and sometimes clearer to read.
Why do I see visible bands in a subtle gradient?: Banding happens when the colour change across the area is spread over fewer steps than the display can show smoothly, and it is most noticeable in large areas of a nearly flat gradient. Adding an intermediate stop, or introducing a very slight amount of noise, both reduce it.
Can I animate a gradient?: Gradient stops are not directly animatable in CSS. The usual approaches are to animate the background position of an oversized gradient, to cross-fade between two elements, or to animate a custom property in browsers that support registered properties. None of them need a different gradient definition than the one produced here.
Are the colours I pick sent to a server?: No. The preview and the CSS are generated in your browser, and nothing you enter is transmitted, stored or logged.

// How to Use CSS Gradient Generator

Pick a type and a starting point

Choose linear, radial or conic, or load a preset if you want a look to adjust rather than starting from two colours. Switching type keeps your stops, so comparing is quick.
Set the stops

Add, remove and reposition colour stops against the live preview. Place two stops at the same position for a hard edge, and add an intermediate hue if the middle looks washed out.
Copy the gradient declaration

Copy the generated declaration and paste it into your stylesheet. Check contrast at both ends of the gradient before putting text over it.

Category Design