Hand-writing a gradient means editing CSS, saving, and refreshing until the angle looks right. This generator gives you a live preview: set the type, angle, and colour stops, watch it update, then copy production-ready CSS with no vendor prefixes needed for any current browser.
0deg points upward and angles increase clockwise, so 90deg runs left to right and 180deg runs top to bottom. This differs from the mathematical convention, which catches people out.
Because interpolating in sRGB passes through a desaturated midpoint, most obviously between complementary colours. Adding an intermediate stop, or using an oklch interpolation hint in modern browsers, fixes it.
No. Unprefixed linear-gradient and radial-gradient have been supported by every current browser for many years. Prefixes only add weight.
Not the gradient itself in a simple transition, since background-image does not interpolate. The usual trick is to animate background-position on an oversized gradient, or use CSS custom properties registered with @property.
All free tools · Blog · About · Contact