Drag color stops, pick OKLCH or OKLab blending for smooth, vivid gradients, and copy production-ready CSS with an sRGB fallback, a Tailwind class, or a PNG.
or click / drag on the preview
Color fields accept hex, rgb(), hsl(), oklch(), oklab() and named colors, with alpha.
Rendered on a canvas at the size above. Canvas only blends in sRGB, so the tool samples your gradient in the chosen color space into many stops; out-of-sRGB colors are clipped.
Start from a preset or press random, then shape it. Click anywhere on the stop bar to add a color at that point — the new stop takes the exact color the gradient already has there, so nothing jumps. Drag stops to move them, or select one and use the arrow keys for 1% steps (10% with Shift). The small diamonds between stops are midpoint hints: drag one to push the blend toward either color, which becomes a CSS color hint like #ff7e5f 0%, 30%, #feb47b 100%. Every stop has a color field that accepts hex, rgb(), hsl(), oklch() or a named color, plus alpha and position. Switch between linear, radial and conic, set the angle with the dial, and for radial and conic gradients click the preview to move the center. Pick a size preset to see the gradient at the aspect ratio you will actually use; the same size is used for PNG export.
Classic CSS gradients mix colors in sRGB, which is why blue to yellow passes through a dull gray and red to green through a muddy brown. Modern CSS lets you choose the color space with syntax like linear-gradient(90deg in oklch, …). OKLab is perceptually uniform, so the middle of the gradient keeps a sensible brightness. OKLCH is the same space in polar form: it rotates through the hue wheel and keeps colors saturated, and the hue path option picks the shorter or longer way around — two identical stops with longer give a full rainbow. srgb-linear is physically correct light mixing and hsl is included for completeness. Because Safari before 16.2, Firefox before 127 and older Chromium builds do not understand this syntax, the generator writes an sRGB line first. Choose sampled to match for a fallback that approximates the modern blend with extra stops.
A radial gradient grows outward from a center point as an ellipse or a circle; its size keyword decides where 100% lands — the farthest corner (default), the farthest side, or the closest side or corner. A conic gradient sweeps around the center like a clock hand, starting at the from angle, which makes pie charts, color wheels and soft spotlight effects easy. Turn on repeating and the stops repeat as a pattern: set two stops at 0% and 10% and you get stripes every 10% of the gradient line, and hard stops (two colors at the same position) create crisp edges instead of fades.
The CSS output is a ready background: declaration; choose whether colors are written as hex, rgb(), hsl() or oklch(). The Tailwind class uses an arbitrary value, so it works without extending your config. The PNG is drawn on a canvas at the selected size, up to 8192 × 8192 pixels, using the tool's own color math because canvas cannot blend in OKLCH — expect a very close match, not a bit-exact one. The whole gradient lives in the URL after the #, so copy share link or a bookmark restores it exactly.
When you pick an interpolation space other than sRGB, or output colors as oklch(), the gradient uses modern CSS that older browsers do not understand. The first line is a plain sRGB gradient those browsers can render; the second line overrides it in every browser that supports the modern syntax. Browsers ignore declarations they cannot parse, so the order matters and no JavaScript is needed.
It tells the browser to blend the colors in the OKLCH color space instead of sRGB. Because OKLCH is perceptually uniform, the middle of a gradient keeps its brightness and saturation instead of turning gray or muddy, for example between blue and yellow. OKLab gives a similar result without rotating the hue; OKLCH rotates the hue and lets you choose the shorter or longer way around the color wheel.
Very close, but not pixel-identical. The PNG is drawn on an HTML canvas, which only blends colors in sRGB and has no color hints or repeating mode. The tool therefore computes the gradient itself in your chosen color space and hands the canvas many intermediate stops, repeated as needed. Colors that fall outside sRGB are clipped, and browsers may dither differently.
Copy the Tailwind class, which puts the gradient in an arbitrary value such as bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Spaces become underscores, which Tailwind turns back into spaces. A single class cannot carry the sRGB fallback line, so for modern interpolation it relies on a browser that supports it.
No. Everything, including the PNG export, runs locally in your browser. The current gradient is stored in the part of the URL after the # sign so you can bookmark or share it, and browsers never send that part of the URL to a server.
