CSS Gradient Generator
Drag color stops, blend in OKLCH or sRGB, and copy the CSS — or save it as a wallpaper.
Preview
Gradient text
The preview has the shape of the image size chosen under Download.
Gradient
Click the bar to add a stop. Drag a stop, or focus it and use the arrow keys (Shift = 10%), Home/End, and Delete to remove it.
Or drag on the preview to move the center.
Presets
Code
Download as an image
Paste a gradient
About the CSS Gradient Generator
Build any CSS gradient visually: linear, radial or conic, plain or repeating, with as many color stops as you need. Drag the stops along the bar (or use the arrow keys), set each stop’s color, opacity and position, and change the angle, the shape and size of a radial gradient or the center of a radial or conic one. The preview shows the gradient as a background, as gradient text or as a gradient border.
Choose how colors blend between stops. CSS Color 4 lets a gradient interpolate in OKLCH, OKLab, linear sRGB, CIE Lab or LCH, HSL or HWB instead of plain sRGB — OKLab keeps the brightness even and avoids the dark, muddy middle that sRGB gives between very different colors, OKLCH also keeps them saturated by going around the hue circle, and the hue setting (shorter, longer, increasing, decreasing) decides which way round the color wheel a polar gradient goes. The CSS comes with an automatic sRGB fallback: the same gradient with extra stops, so older browsers draw almost the same colors.
Copy the CSS or Tailwind classes, or download the gradient as a PNG, WebP or SVG image at any size up to 8192 × 8192 px — desktop, phone and social sizes are one click away. Images are drawn by your browser, pixel by pixel, with optional dithering against banding.
How to use it
- Pick a preset or start from the default. Choose Linear, Radial or Conic, and tick Repeating for stripes and rings.
- Select a stop on the bar to edit its color, opacity and position; drag it, or use the arrow keys (Shift for 10% steps). Click the bar to add a stop; press Delete to remove the selected one.
- Set the angle, or for radial and conic gradients the shape, size and center (you can also drag on the preview).
- Choose a Color space to blend in. With OKLCH, HSL or LCH, choose which way the hue turns.
- Copy the CSS (for a background, text or border) or the Tailwind classes — or choose a size and download a PNG, WebP or SVG.
Examples
Linear 135° · #ff7e5f → #feb47b · OKLCH
background-image: linear-gradient(135deg, #ff7e5f 0%, #ff9a68 50%, #feb47b 100%); background-image: linear-gradient(135deg in oklch, #ff7e5f 0%, #feb47b 100%);
The first line is the sRGB fallback for older browsers — here one extra stop is enough; gradients between distant hues get more. Browsers that understand in oklch use the second line.
Same gradient · Tailwind v4
bg-linear-135/oklch from-[#ff7e5f] to-[#feb47b]
Tailwind v4 blends in OKLab unless you add a modifier such as /oklch or /srgb.
Repeating linear 45° · #f6d365 0–5%, #fda085 5–10%
repeating-linear-gradient(45deg, #f6d365 0%, #f6d365 5%, #fda085 5%, #fda085 10%)
Two stops at the same position make a hard edge; the last stop (10%) sets how often the pattern repeats.
Common uses
- Hero backgrounds, buttons and cards with smooth, vivid gradients that do not turn gray in the middle.
- Gradient headlines (background-clip: text) and gradient borders that keep their rounded corners.
- Desktop, phone and tablet wallpapers, and social media cards, saved as images.
- Stripes, rings and color wheels with repeating and conic gradients.
How CSS gradients are drawn
- Linear: colors change along a line through the center at the angle you set (0° points up, 90° to the right). The line is just long enough for the corners to get the first and last colors (CSS Images 3).
- Radial: colors spread out from the center to an ending shape — a circle or an ellipse — sized to the closest or farthest side or corner of the box.
- Conic: colors turn around the center like a pie chart, starting at the “from” angle (CSS Images 4).
- Repeating versions repeat the stretch from the first to the last stop forever. Two stops at the same position switch color instantly.
Color spaces and the sRGB fallback
Without an interpolation method, a gradient between hex, rgb() or hsl() colors blends in gamma-encoded sRGB — CSS Color 4 keeps this for compatibility. Blending blue and yellow in sRGB passes through gray; in OKLab it stays bright, and OKLCH goes around the hue circle instead of through the middle, which keeps the colors saturated. With a polar space (OKLCH, LCH, HSL, HWB) the hue method chooses the direction: shorter (the default), longer, increasing or decreasing (CSS Color 4 §12.4). Colors are blended with premultiplied alpha, so fading to transparent never turns gray.
Browsers that do not understand in oklch ignore that declaration. The fallback declaration before it describes the same gradient in plain sRGB with extra stops added wherever the sRGB blend would drift from the true colors (by more than about a third of a just-noticeable difference), so older browsers show almost the same gradient.
Images and wallpapers
PNG and WebP images are calculated pixel by pixel with the CSS gradient math, so radial sizes, repeating patterns and color spaces come out as in the preview. One exception: where a blend passes through colors an sRGB screen cannot show (OKLCH or LCH between distant hues, such as blue to yellow), the image brings them back with the CSS Color 4 gamut-mapping method, while browsers currently clip them — so that stretch of the image can look visibly different from the live preview. Dithering adds an invisible, regular pattern of ±½ shade that hides the stair-step banding large smooth gradients can show on 8-bit screens. WebP is encoded by the browser where it can; Safari cannot, so a WebAssembly encoder is loaded instead. SVG files stay sharp at any size; SVG has no conic gradient, so conic gradients are drawn as 720 thin wedges.
Limitations
- One gradient at a time; layered (mesh-like) backgrounds made of several gradients are not combined.
- Stop positions are percentages; px positions, color hints and explicit radial sizes such as
circle 100pxare not supported. - Pasted gradients with corner directions (
to top right) are converted to 45° steps, which match only on square boxes. - Colors that fall outside sRGB while blending are mapped back with the CSS Color 4 gamut-mapping method in images and in the sRGB fallback; browsers clip them instead, so in OKLCH or LCH gradients between distant hues the most saturated stretch can differ visibly from the live CSS.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Which color space should I use?
OKLCH for vivid gradients between different hues, OKLab for smooth, even blends (Tailwind v4’s default), and sRGB when you need to match an existing design exactly. Linear sRGB looks like mixing light and is lighter in the middle.
Will the gradient work in older browsers?
Yes, with sRGB fallback on. The CSS then has two declarations: an sRGB version with extra stops, and the modern in oklch version. Browsers that do not understand the second simply keep the first. Plain sRGB gradients need no fallback.
How do I make gradient text?
Choose Text in the preview and copy the CSS. It sets the gradient as the background, clips it to the text with background-clip: text and makes the text color transparent.
How do I add a gradient border with rounded corners?
Choose Border. The CSS uses two backgrounds — a solid color on the padding box and the gradient on the border box — with a transparent border, so border-radius works, unlike border-image.
How large can the downloaded image be?
Up to 8192 × 8192 pixels for PNG and WebP — the largest canvas that phones and tablets reliably handle. SVG files have no size limit and stay sharp.
Is my design uploaded?
No. The gradient, the code and the images are all produced in your browser, and the page works offline once loaded.