CSS gradient

[01] How CSS gradients work

A gradient is a series of color stops along a line (linear) or radius (radial). The browser interpolates colors between adjacent stops.

linear-gradient(135deg, #0A0A0A 0%, #0A0A0A 100%)
radial-gradient(circle at center, #0A0A0A 0%, #0A0A0A 100%)

[02] Angle conventions

• 0deg = bottom-to-top
• 90deg = left-to-right
• 180deg = top-to-bottom (default)
• 270deg = right-to-left

[03] Tips

• Stop positions are percentages - multiple stops at the same position make sharp transitions.
• Hard stops (e.g. red 50%, blue 50%) create solid bands instead of fades.
• Multi-gradient backgrounds stack with commas: background: g1, g2;
• CSS variables work inside gradient functions, so you can theme by swapping vars.

[04] Common use cases

• Hero / page backgrounds. A two-stop linear gradient at 135deg is the workhorse: subtle vertical light, no horizontal banding artifacts on most monitors.
• Button accents. A short-distance gradient (0% to 60%) over a button gives depth without committing to a 3D look. Pair with a darker hard-stop at the bottom for a subtle bevel.
• Image overlays. A linear gradient from transparent to a dark color, layered on top of a photo, makes light text legible regardless of the photo's brightness. Stack linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%), url(photo.jpg).
• Skeleton loading shimmer. Animate a single moving gradient stop across a placeholder element to hint that content is incoming.
• Brand mesh backgrounds. Stack 3 to 5 large radial gradients at different positions with low-opacity colors for the soft "mesh" look popularised by Linear, Stripe, and Vercel.
• Borders and dividers. A 1px-tall gradient as a horizontal divider feels less harsh than a solid hr: linear-gradient(90deg, transparent, var(--ink), transparent).

[05] Browser support and gotchas

Linear and radial gradients are universally supported across modern browsers. Conic gradients (conic-gradient()) are well-supported in evergreen browsers but may need fallbacks for very old enterprise installs. Color-space syntax (e.g. linear-gradient(in oklch, ...)) is newer; check support before relying on it. The classic gradient gotcha is interpolating between complementary colors (red-to-cyan, blue-to-orange) which produce a muddy gray midpoint in sRGB; specifying in oklch or adding an intermediate stop fixes that.