Every web developer remembers the first gradient they wrote: a sad vertical linear-gradient from one hex color to another, with a color stop at exactly 50% because that seemed like the reasonable middle. It looked fine. Then someone heard about "multi-stop gradients" and "radial origins" and "conic charts" and suddenly the CSS gradient syntax was a whole language you hadn't bothered to learn.
CSS gradients come in three families. linear-gradient(135deg, #667eea, #764ba2) draws a line at 135° and interpolates color along it — the workhorse. radial-gradient(circle at 30% 60%, #ff9a9e, #fecfef) radiates outward from a center point you place anywhere in the box, which is how you get those soft "spotlight" backgrounds. And conic-gradient(from 45deg, red, orange, yellow, green, blue, purple, red) sweeps in a full circle around a center point and is the one you actually want for pie charts, color wheels, and spin-loaders. Each function takes color stops (color [position] [color [position] ...]) where you can place the stop anywhere along the axis or curve using a percentage or a pixel value. That fine-grained control is where the interesting stuff lives.
The language gets slippery in a few well-known places. Color-stop interpolation used to use sRGB by default, which means blending from a vivid red to a vivid blue goes through a desaturated purple-gray midpoint instead of the "vivid in-between" you probably imagine. The Color Level 4 spec added in oklch and in hsl interpolation hints (linear-gradient(in oklch, red, blue)) that fix this, but support only landed in 2023–2024 across modern browsers. This tool detects whether a chosen interpolation space is safe to use in your target browsers and falls back to the sensible default for your stated support matrix. The to top right shorthand vs. the 45deg angle syntax is the convention difference that catches out anyone transitioning from old CSS tutorials.
The canvas at the top of the tool shows a live preview as you add, remove, and drag color stops — direct manipulation that lets your eyes do the work while the tool emits matching CSS. Edit the angle of a linear gradient by rotating a handle; drag the focal point of a radial gradient with your mouse to shift the hotspot from "center" to a natural-looking upper-left, the way real light works. A toggle switches the preview between a wide banner, a square tile, and a circular surface so you see how the gradient reads at different aspect ratios and termination shapes.
Beyond the three core families, the tool generates a handful of higher-level patterns radial-stripe, checker, mesh, and noise — as CSS gradient compositions, so you don't need SVG for effects that used to require it. Export options include the raw CSS (ready to drop into any background-image), Tailwind-syntax (bg-[linear-gradient(...)]) for the utility-first crowd, and a small SVG equivalent for cases where you need the gradient embedded in an icon or a favicon.
Real design contexts this shows up in: a hero section that needs a subtle top-to-bottom tone shift without looking like 2010, a dark-mode variant where the gradient has to flip or invert to keep its feel, a branded loading bar whose color transition needs to hit the brand accent at both ends, a pie-chart implementation that avoids importing a charting library for two series, a background color animation that interpolates gradient end-points between keyframes for a "breathing color" effect, and verifying that two differently-authored gradient declarations produce visually identical results (they often don't, and a side-by-side preview catches it immediately).