Controlled CSS linear-gradient generator
Accepts only 0/90/180 degrees plus validated colours and integer percentages, serializes linear-gradient() with a fixed grammar; preview and copied text match.
Inputs and parameters
angle— Angle (0 / 90 / 180)color0— Colour 1position0— Position 1 (integer 0–100)color1— Colour 2position1— Position 2 (integer 0–100)color2— Colour 3 (optional)position2— Position 3 (optional, integer)color3— Colour 4 (optional)position3— Position 4 (optional, integer)color4— Colour 5 (optional)position4— Position 5 (optional, integer)
Real example
angle=90, color0=#176b50 @0%, color1=#ffffff @50%, color2=#e8f3ec @100%
→ background-image: linear-gradient(90deg, #176b50 0%, #ffffff 50%, #e8f3ec 100%);Limits and failure handling
Linear gradients at 0/90/180 only, 2–5 stops, strictly increasing integer 0..100% positions; no radial/conic/repeating gradients, easing stops, CSS variables or arbitrary raw CSS. Generated output is capped at 512 bytes.
FAQ
Can I generate 45 degrees or radial gradients?
No, this release supports linear gradients at 0/90/180 only; other angles raise INVALID_ANGLE rather than being silently rewritten.
Why must the preview and copied text match?
Both come from the same serializeGradient() pure function; tests include exact CSS snapshots and a parseGradientCss() round trip so the copied value conforms to the fixed grammar.
What if I paste malicious CSS?
url(, </style>, expression(, @import, braces or semicolons trigger UNSAFE_CSS; the input is never concatenated into a style rule.