CSS gradient generator

How gradient CSS works

A CSS gradient is not an image file. It is an instruction the browser paints itself, which means it costs no download, scales to any size without blurring, and can be changed by editing one line. The syntax is a function used as a background value:

The browser blends smoothly from the first colour to the second along the direction you give. A radial gradient works the same way but blends outwards from the centre, so it takes a shape keyword (usually circle) instead of an angle. This tool writes the declaration for you as you adjust the controls, so what you copy is exactly what you previewed. Paste it onto any element with a size, such as a header, a button or the page body, and it will fill whatever space that element occupies. Because a gradient is technically an image value, you can also use it anywhere CSS accepts one, including background-image and even border-image.

Understanding the angle

Gradient angles follow a compass-style convention that catches people out. 0deg points up, so the gradient runs from bottom to top, with the first colour at the bottom. Turning clockwise, 90deg points right (left to right), 180deg points down (top to bottom) and 270deg points left (right to left). The diagonal angles fall in between: 135deg travels from the top left corner towards the bottom right, which is a popular choice for hero banners because it echoes reading direction. If your gradient looks upside down, you almost always need the angle plus or minus 180.

Worked examples

Each of these was produced with the controls above: pick the two colours, set the type and angle, and copy the line. The hex codes are written in uppercase purely for readability; CSS treats upper and lower case identically.

Making gradients look good

The gradients that age best blend colours that are already related. Two shades of the same hue, or two hues within about 60 degrees of each other on the colour wheel, blend cleanly; opposite hues pass through a muddy grey in the middle, which is why red-to-green gradients rarely look intentional. If you need distant hues, add a stop between them to steer the route. Watch for banding on large areas: when the two colours are far apart in lightness, screens run out of in-between shades and you see stripes, so either bring the colours closer or shorten the distance the gradient covers. Finally, if text sits on top of a gradient, check it against the lightest and the darkest ends, because contrast that passes at one edge can fail at the other. A safe pattern is to keep gradients for decorative surfaces and put text on a solid overlay or a consistently dark region. The palette generator on this site is a quick way to find pairs of related colours worth blending, and the analogous scheme in particular tends to produce natural gradient pairs.

Frequently asked questions

Related tools