Using the generator

Start with a preset or choose your own colors. Move the color stops to adjust the transitions, then copy the CSS, a custom property, or a Tailwind arbitrary value.

Choose a color space

sRGB interpolates RGB channels. OKLab changes perceptual lightness more evenly; OKLCH interpolates lightness, chroma, and hue. Compare them in the same gradient to see which transition fits your design. The generated CSS names the space explicitly.

Check text against the gradient

The inspector estimates the lowest text contrast across every color stop and samples inside each transition. Transparency is composited over white, matching the preview. Normal text needs at least 4.5:1 for WCAG AA; large text needs 3:1. An estimate is not a guarantee for a different background, browser, or text placement. Check the final interface too.

Save or share a gradient

Share copies a URL that restores the gradient. Favorites stay in this browser and can disappear if you clear site data. Copy a share URL when you want a portable backup.

Export an image

PNG exports a 1600 × 900 image including your preview text. SVG preserves the CSS gradient inside an SVG wrapper and is intended for browsers; design editors that do not support embedded HTML may not display it. Use PNG for broad image compatibility.

Browser support

Modern color spaces require a browser with CSS color interpolation support. If your audience includes older browsers, provide a solid background or a tested fallback before the generated declaration.