CSS Gradient Guide: Linear, Radial and Conic Color Transitions

Color transitions (gradients) add depth and a sense of movement in place of flat colors, and they're common on websites, app interfaces and social media graphics. In CSS a gradient behaves like an image, so it's applied with the background or background-image property.

Linear gradients

The most common type. Colors change along a line:

• linear-gradient(90deg, #5b7cff, #ff8a5b) goes from left to right.
• linear-gradient(135deg, ...) runs diagonally from top left to bottom right.
• Instead of an angle you can use directions such as to right or to bottom right.

Radial and conic gradients

• Radial (radial-gradient): colors spread outward from a center. Good for light effects and highlights.
• Conic (conic-gradient): colors rotate around a center. Used for pie charts and color wheels.

Color stops

You can set each color's position as a percentage. linear-gradient(90deg, #5b7cff 0%, #b45bff 50%, #ff8a5b 100%), for example, gives an even three-color transition. Putting two stops at the same position creates a hard edge instead of a smooth blend, a technique used for stripes.

Avoiding gray middles

Blending two colors far apart on the color wheel (e.g. blue and orange) can leave a dull, grayish zone in the middle. To avoid it:

• Add a more vivid in-between color.
• Pick closer hues.
• In current browsers, ask for the blend to be calculated in a perceptual color space such as OKLCH (linear-gradient(in oklch, ...)).

Legibility

If you put text on a gradient, make sure it's readable over both the lightest and the darkest parts. Check contrast at both ends.

With the CSS Gradient Generator you can build linear, radial and conic gradients with up to 6 color stops, copy the CSS, or download the gradient as a PNG or SVG background.