A CSS color scale, or gradient, is a generated image whose colors change across a region. Use one as a background image when a solid color is too flat: a subtle top-to-bottom transition can make a button look rounded, especially alongside a shadow. Gradients can also supply the image for a mask or a text-wrapping shape. section 13.1 section 13.2.1 section 14.4.2
Start with a direction and two colors
`.fade { width: 400px; height: 200px; background-image: linear-gradient(to right, white, blue); }` fades across the element from left to right. `90deg` can specify the same direction. Because the result is a background image, a `background-color` can sit behind it. Take care with the `background` shorthand: it resets background properties you do not specify. section 13.1
Color stops control where each color appears. In `linear-gradient(90deg, turquoise, white, blue)`, three unspecified stops spread evenly: turquoise at the left, white in the middle, blue at the right. Specify positions such as `turquoise 0%, white 50%, blue 100%` when placement matters; percentages and lengths are both valid. Put different colors at the same position for a hard switch rather than a fade. For example, `turquoise 40%, white 40% 60%, blue 60%` makes three solid stripes. `repeating-linear-gradient()` repeats a pattern, such as diagonal stripes. section 13.1.1
Choose the transition that fits the shape of the effect:
- Linear gradients change along a specified direction or angle. section 13.1
- Radial gradients change outward from the center of an ellipse. section 13.1.4
- Conic gradients change around an ellipse. Their final-to-first-color join may show a hard edge; repeating the first color as the last stop avoids it. Starting angle, center, interpolation space, and stop positions can be adjusted. section 13.1.4
The browser calculates colors between stops by interpolation. The chosen color space can change the visible middle dramatically: a yellow-to-blue gradient in sRGB passes through gray, while one in OKLCH passes through green, teal, and cyan. Use `linear-gradient(90deg in oklch, yellow, blue)` to request OKLCH interpolation. The hue can also take a longer path. Color-space selection was not supported in Firefox as of mid-2024, so place a gradient without that selection before it as a fallback. section 13.1.2
Use the same gradient for a cutout and its text flow
A gradient is not limited to a painted background. Set `mask-image: linear-gradient(to bottom, transparent, black)` to fade an element into view. For a diagonal cut, a gradient with black and transparent stops at the same position can be assigned to both `mask` and `shape-outside`, keeping the visible edge and wrapped text aligned. If a mask seems entirely visible or hidden, temporarily apply its gradient as `background-image` to inspect it. section 14.2.1 section 14.4.2
