CSS Gradient

Linear, radial, and conic gradients — when to use each

The three CSS gradient types serve different visual purposes. Linear gradients transition colors along a straight directional axis. They are the most versatile and commonly used: sky-to-ground background fades, button highlight effects, header backgrounds, and dividers. The angle parameter (0deg = bottom to top, 90deg = left to right, 135deg = diagonal) lets you orient the transition in any direction.

Radial gradients radiate from a central point outward. They create spotlight effects, glowing badges, circular button highlights, and vignette overlays. The shape can be a circle or ellipse, and the center point can be offset from the default center using position values (at top left, at 30% 70%).

Conic gradients sweep colors around a central point like the hands of a clock. They are uniquely suited for pie charts (using hard color stops), color wheels, spinning progress indicators, and angular gradient effects that are impossible with linear or radial types. Conic gradients are the newest of the three and require Safari 12.1+, Chrome 69+, and Firefox 83+ — covered by all modern browsers as of 2024.

CSS gradient color stops — controlling precisely where transitions happen

A color stop defines a color and the position along the gradient axis where that color appears at full intensity. Between two stops, colors blend smoothly. The position is expressed as a percentage (0% to 100%) or a length value (px, em, vw, etc.).

Key techniques using color stops: A hard stop is created by placing two stops with the same position or adjacent positions — for example, red 50%, blue 50% creates a sharp dividing line with no blend. This is how striped backgrounds and pie chart wedges are created.

A repeating gradient tiles a single gradient pattern: repeating-linear-gradient(90deg, transparent 0, transparent 10px, blue 10px, blue 20px) creates vertical blue stripes repeating every 20px.

Midpoint hints let you control where the midpoint of the blend falls between two stops, producing asymmetric fades. The browser default is the exact midpoint between two stops; hints shift the transition point left or right.

Multiple color stops allow complex multi-color gradients: a sunset might use orange at 0%, red at 40%, purple at 70%, and dark blue at 100%.

Performance and accessibility considerations for CSS gradients

CSS gradients are generated by the GPU rather than downloaded as image files, which makes them extremely efficient — a gradient background loads instantly and costs nothing in network requests. They also scale perfectly to any screen resolution and pixel density, including Retina/HiDPI displays, without the blurriness that affects rasterized images at non-native resolutions.

However, very complex gradients with many color stops, or large gradient backgrounds covering the full viewport, can have a repaint cost when the page scrolls or elements animate. If you notice scroll jitter or animation stuttering on a gradient background, try adding will-change: transform or transform: translateZ(0) to the element to promote it to its own GPU compositor layer.

For accessibility, never use gradient color changes as the sole means of conveying information — users with color vision deficiencies (affecting roughly 8% of men) may not perceive color transitions. Ensure sufficient contrast between text and gradient backgrounds across the entire text region, not just at one end of the gradient. Use browser developer tools to check contrast at multiple points along the gradient.