CSS Gradient Generator

A CSS gradient is generated by the browser rather than stored as an image, so it scales to any size without loss and costs nothing in bandwidth. The trade-off is that the browser decides how to blend between your color stops, and the default blending is where most disappointing gradients come from.

The gray dead zone between complementary colors

Blending two colors from opposite sides of the color wheel, such as blue to yellow or red to green, traditionally passes through a desaturated gray band in the middle. This happens because interpolation runs through sRGB by default, and the straight line between two saturated colors in that space passes near the neutral axis. It isn't a mistake in your color choices, it's a property of the space the blend is computed in.

Modern CSS lets you specify a perceptual interpolation space instead, which keeps saturation up across the transition and produces the smooth result designers usually want. Where you cannot rely on that, the practical workaround is to add an intermediate stop in a hue that sits between the two endpoints, which steers the blend away from gray manually.

Banding, and why large gradients show it

Eight bits per channel gives 256 steps, which is plenty across a small element and visibly insufficient across a full-screen background. When a subtle gradient stretches over a wide area, each step occupies enough pixels to become a visible stripe. Two things reduce it: increasing the color difference between the endpoints so the steps are less evenly spread, or overlaying a very faint noise texture, which is the trick used in most polished hero sections.

Angles and text legibility

Gradient angles in CSS point in the direction the gradient travels toward, measured clockwise from upward. That means 180 degrees runs top to bottom and 90 degrees runs left to right, which catches people who expect the mathematical convention instead.

If text sits on top, remember that contrast has to hold at every point along the gradient rather than on average. Text that passes a contrast check against the dark end can fail badly against the light end. Check the lightest stop first, since that's where light-colored text gives out. If the range is too wide to satisfy everywhere, put a semi-transparent overlay behind the text.