Linear, radial, and conic - up to five color stops. Real-time preview. CSS and Tailwind class export.
background: linear-gradient(115deg, #FF512F 0%, #F09819 100%);bg-gradient-to-br from-[#FF512F] to-[#F09819]A gradient generator builds linear, radial and conic gradients from two or more color stops and outputs them as CSS, Tailwind classes or an image. This one supports up to five stops, drag handles, custom angles and OKLCH interpolation.
Pick a gradient type, add stops by clicking the bar, drag them to position and set the angle. The CSS updates live with vendor-safe syntax. Switch interpolation from sRGB to OKLCH to remove the gray dead zone that appears in the middle of gradients between complementary colors, which is a one-line change in modern CSS (in oklch).
Export as CSS, a Tailwind bg-gradient class set, SVG, or a PNG at any size.
Use background: linear-gradient(angle, color1, color2). The generator writes this for you, including multi-stop, radial and conic forms.
Blending in sRGB passes through a desaturated gray between distant hues. Interpolating in OKLCH keeps saturation through the transition; toggle it in the generator.
Yes, up to five stops here, each with its own position.
Yes. The Tailwind output gives from, via and to classes plus arbitrary-value syntax for exact angles.