Gradient Generator

A CSS gradient is a procedurally-rendered image specified by direction or shape, plus two or more color stops. Linear gradients run along an angle; radial gradients spread from a point; conic gradients sweep around one.

This generator builds the `background-image` declaration from your stops and angle, with live preview. Output is plain CSS — no prefixes needed for any browser shipped after 2017.

The gradient functions in CSS — linear-gradient(), radial-gradient(), conic-gradient() — are part of CSS Images Level 3 and Level 4. Each produces an image at the size of its container, interpolating between stops in the specified color space. The default interpolation space is sRGB, which is fast but produces a gray midpoint when blending complementary colors. Modern syntax adds an `in <colorspace>` clause — `linear-gradient(in oklch, blue, red)` — that interpolates in OKLCH or LCH for visually smoother transitions without the muddy middle.

A worked example: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)` produces a diagonal sweep from a soft indigo to a deeper purple. The 135-degree angle starts top-left and ends bottom-right (CSS angles measure clockwise from straight up). To add a midpoint highlight at 60% with a brighter shade, the syntax becomes `linear-gradient(135deg, #667eea 0%, #a78bfa 60%, #764ba2 100%)`. Stops can be percentages or absolute lengths; mixing them is legal but rarely useful.

Limitations: gradient banding is the most common visual issue. On low-bit-depth displays, smooth gradients between similar colors show visible stripes — the renderer can't represent enough intermediate values. Adding subtle noise via a separate background layer or upgrading to a 10-bit display fixes it. Animation across many stops is GPU-friendly but can stutter on low-end mobile when the gradient repaints continuously. CSS gradients also can't be sampled programmatically; if you need to read pixel values, render to a canvas first.

Adjacent concepts worth knowing: SVG gradients support more features (gradient transforms, feImage filters) at the cost of more markup. Mesh gradients are not native to CSS — tools like Mesher generate them as SVG or images. The OKLCH color space, standardized in CSS Color 4, is the de-facto choice for perceptually uniform gradients in modern toolchains.