CSS Gradient Generator

The Three Gradient Types

Linear gradients run along a line. The angle sets the direction and every point perpendicular to that line shares a colour. It is the workhorse, and most backgrounds you see are one.

Radial gradients spread from a point. Colour changes with distance from the centre, which makes them right for glows, spotlights and anything that should feel like it has a source.

Conic gradients sweep around a point. Colour changes with angle rather than distance, which is what makes pie charts, colour wheels and progress rings possible in pure CSS.

All three take the same stop syntax. Once you can write the stops for one, the others are a matter of changing the function name and the geometry.

How to Use This Generator

Start from a preset or a random pair. Both give you a working gradient immediately, which is a better starting point than two arbitrary colours.

Watch for the amber warning. It appears when an adjacent pair will fade through grey, and it shows the before and after side by side so you can judge whether it matters for your case.

Add stops rather than fighting the colours. Three stops with a well chosen middle almost always beat two stops that nearly work.

Copy CSS or Tailwind. The Tailwind form uses underscores in place of spaces because arbitrary values cannot contain spaces, and Tailwind converts them back.

Why Gradients Go Grey in the Middle

Interpolation is a channel by channel average. Halfway between two stops, each of red, green and blue is the mean of the two endpoints. Nothing about that operation knows what a colour looks like.

Opposite hues average to grey. Blue and orange are on opposite sides of the wheel, so their midpoint has roughly equal amounts of each channel, which is the definition of a desaturated colour.

Adding a stop routes around the problem. Placing a saturated colour in the middle forces the gradient to travel around the wheel rather than across it, which is exactly what the suggestion above does.

Newer colour spaces fix this properly. Interpolating in Oklab or Lch keeps saturation through the transition, and CSS now supports specifying the interpolation space directly. Support is good in current browsers and the extra stop remains the safe approach.

Angles and How CSS Measures Them

Zero degrees points up and increases clockwise. That is the opposite of the mathematical convention, and it is why 90 degrees gives a gradient running to the right rather than upwards.

Keywords are often clearer. Writing to bottom right instead of 135 degrees reads better, and it adapts to the element's shape rather than being a fixed angle.

The gradient line is longer than the element. At an angle, CSS extends the line so the corners receive the endpoint colours, which is why a diagonal gradient looks correct at any aspect ratio.

Colour Stops and Positions

Positions are optional. With none given, stops are spread evenly, which is usually what you want for two or three colours.

Uneven positions control pacing. Putting a stop at 20 percent rather than 50 means the first colour holds longer and the transition is compressed, which is often more interesting than an even spread.

Stops can share a position. Two stops at the same percentage produce a hard edge with no blending at all.

Transparency needs care. Fading to transparent in some browsers fades through transparent black, which shows as a grey cast. Fading to the same colour at zero alpha avoids it entirely.

Hard Stops, Stripes and Shapes

Two stops at one position make a hard line. That single trick turns the gradient functions into a general purpose shape tool.

Stripes are hard stops repeated. The repeating variants of each function tile the pattern, which is how backgrounds like barber poles and grids are made without an image.

Conic hard stops make pie charts. A few stops at exact percentages produce a chart with no library, no canvas and no SVG.

Gradients are images. Anywhere CSS accepts an image, it accepts a gradient, including border-image, mask-image and multiple stacked backgrounds.

Gradient Text and Borders

Gradient text needs a background clip. Set the gradient as the background, clip it to the text and make the text colour transparent. It has worked across browsers for years.

Check that a fallback colour is set. If the clip fails, transparent text on a gradient background is unreadable, so declare a solid colour first.

Gradient borders take two backgrounds. One clipped to the padding box and one to the border box, which is fiddly but reliable and needs no extra element.

Contrast and Accessibility

Text over a gradient must pass at every point. Contrast is easy to check against one colour and easy to forget against a background that changes across the element.

Check the worst point, not the average. If white text passes at one end and fails at the other, the whole thing fails.

An overlay is the usual fix. A semi transparent dark layer between the gradient and the text keeps the effect while making the contrast predictable.

Banding shows on large areas. A subtle gradient across a full screen can show visible steps on an eight bit display. A very slight noise texture over the top hides it.

Common Mistakes to Avoid

Picking two opposite hues and wondering why it looks dirty. The midpoint is grey by arithmetic, not by accident, and one extra stop fixes it.

Fading to transparent. In some rendering paths that is transparent black and it greys the transition. Fade to the same colour with zero alpha instead.

Too many stops. Beyond three or four the result usually looks like a spill rather than a design. Restraint reads as intent.

Ignoring text contrast. A gradient that looks beautiful can make half its overlaid text unreadable, and the checker you ran against the top of the element will not tell you.

Frequently Asked Questions