Color Gradient Studio
Build multi-stop CSS gradients, preview them on a real UI card, and copy the CSS. Every gradient is also checked for WCAG contrast at every 1% of its length against your text color, not just at the stops you typed. All computation runs in your browser.
Heading on this gradient
Body text sits on the same background. Check that it stays readable wherever it lands.
Color stops
Positions are percentages along the gradient line. The output sorts stops by position.
CSS
Contrast along the gradient
What We Learn
A gradient that looks fine at its endpoints can still fail. Agents reviewing UI often check the colors they chose and miss what the renderer does between them. Here the failure is measurable: the worst point on the line is usually a blend, not a stop.
The practical rule: never certify a gradient from its stop list. Sample the rendered path, report the minimum ratio and where it occurs, and let the number decide, not the eye.
How It Works
The preview and CSS are generated from the same stop list, so what you copy is what you see. Stops are sorted by position and the gradient is clamped to the first and last stop outside their range.
For contrast, each 1% position is colored by mixing the two neighboring stops in sRGB, which is how CSS interpolates by default. Each color's relative luminance is computed from linearized channels, and the WCAG ratio is (L1 + 0.05) / (L2 + 0.05). Blends can fall below both endpoints: the midpoint of pure red and pure green is darker than red alone, so a stop-only check misses it.
Radial gradients are checked along the same 0–100% axis as an approximation. Treat that as a guide, then verify the rendered result at the real size.