CSS Gradient Generator

The angle is not the angle you expect

CSS gradient angles start at the top and turn clockwise. 0deg points up, 90deg points right, 180deg points down. Trigonometry starts at the right and turns anticlockwise, so if you are porting a formula from anywhere else, expect to be ninety degrees out and spinning the wrong way.

The keyword forms look like shortcuts for round numbers, and for the edges they are: to right really is 90deg. The corner keywords are not. to top right equals 45deg only on a square box. On any other shape the browser tilts the gradient line so that a line drawn perpendicular to it through the starting corner passes through the two adjacent corners. The effect is that a corner gradient stays aligned with the box's own diagonal at any aspect ratio. If you want an angle that does not shift when the box resizes, type the degrees instead.

The gradient line is also longer than the box it sits in. Its 0% and 100% points land where perpendiculars through the far corners cross it, which is why the corners get the pure end colors rather than something part-way through the blend.

Stops, hard edges and clamping

Omit the positions and the browser spaces the stops evenly: two stops land at 0% and 100%, three at 0%, 50% and 100%. Give positions to some but not all, and the unpositioned ones are distributed evenly through whatever gap they fall in.

Two stops at the same position produce a hard edge with no blend at all. That is how you build stripes, progress bars and checkerboards with no image file. The double-position shorthand writes it compactly — linear-gradient(90deg, #000 0 50%, #FFF 50% 100%) is two solid halves.

A stop can never sit behind the one before it. Give it a smaller position and the browser clamps it up to match its predecessor, which turns it into a hard edge rather than reordering anything. Drag a handle above past its neighbour and you will watch it happen.

Why blue to yellow turns gray in the middle

By default the browser interpolates between stops in sRGB, one channel at a time. Halfway between two roughly complementary colors the channels average out close to neutral, so a blue-to-yellow blend runs through a dead gray. It is not a rendering fault. It is what the arithmetic says.

There are two fixes. Add a middle stop in a hue you actually want, which is what most designers end up doing. Or change the interpolation space: linear-gradient(in oklab, blue, yellow) holds perceived lightness steady across the blend and skips the mud. The interpolation syntax works in current browsers and not in old ones. This tool does not emit it — copy the CSS and add in oklab after the angle if you want it.

Banding, and the gradient that looks striped

Eight bits per channel gives 256 values. Stretch a subtle gradient across a thousand pixels and there are far more pixels than distinct colors to fill them, so the transition arrives in visible bands. A large area and a small color distance both make it worse, which is why a dark-gray-to-black hero section is the classic offender. Your options are to increase the distance between the stop colors, shrink the area, or lay a faint noise texture over the top to break up the edges. Browsers dither a little, inconsistently, so the same gradient can band on one machine and look clean on the next.

A gradient is an image, not a color

Gradients belong in background-image. You cannot put one in color, border-color or anywhere else expecting a color value. Gradient text is done by painting the gradient as a background, then clipping it to the glyphs with background-clip: text and color: transparent — and if the clip fails for any reason, transparent text means invisible text, so test it before you ship it.

You also cannot transition between two gradients. Background images are not interpolatable, so a hover that swaps one gradient for another snaps. Stack both as separate layers and animate opacity, or register a custom property with @property so the color inside the gradient can animate instead.

Where this tool stops

It writes one layer, in sRGB, with no fallback declaration. Multi-layer backgrounds — a gradient over a photo, or several gradients stacked into a pattern — are a comma-separated list this interface does not build. Repeating gradients only visibly tile when the last stop sits below 100%; leave it at 100% and there is nothing left over to repeat. And the preview is your browser on your display, so banding and the exact rendering of conic gradients vary between engines more than you would expect.

Frequently asked questions

What is the difference between linear, radial and conic gradients?

Linear blends along a straight line at an angle you choose. Radial blends outward from a point, in a circle or an ellipse. Conic sweeps around a centre point like a clock hand, which is what makes pie charts and color wheels possible in pure CSS.

Why does my gradient have visible stripes?

That is banding. Eight bits per channel gives 256 steps, and a subtle gradient stretched over a wide area runs out of distinct colors before it runs out of pixels. Increase the color distance, make the area smaller, or overlay a faint noise texture.

How do I make a gradient with a hard edge instead of a blend?

Put two stops at the same position. A stop at 50% followed by the next color also at 50% gives a clean line with no transition. Repeat the pattern and you have stripes without an image file.

Can I animate a CSS gradient?

Not directly. Background images do not interpolate, so transitioning from one gradient to another snaps instead of blending. Stack two gradients as layers and animate the opacity, or register a custom property with @property and animate the color inside the gradient.

Does a gradient work as a border or as text color?

Not as a plain color value. For text, paint the gradient as a background and clip it with background-clip: text plus color: transparent. For borders, use border-image with the gradient, or a padding trick with two stacked backgrounds.

Last updated September 19, 2026