Click the bar to add a stop · drag or use ← → to move · Delete removes
.gradient {
/* sRGB fallback for browsers without CSS color-space interpolation */
background: linear-gradient(135deg, #7c6dfa 0%, #c47fff 50%, #4dd9c0 100%);
background: linear-gradient(in oklch 135deg, #7c6dfa 0%, #c47fff 50%, #4dd9c0 100%);
}Build smooth OKLCH gradients, stack layers with blend modes, add grain, preview them on real UI, and export CSS, Tailwind or a PNG/SVG image.
What's included
About this tool
A good gradient is more than two colors and an angle. Mix two saturated colors in a plain CSS gradient and the middle often turns grey; a big hero background shows visible bands; and the gradients designers love today are layered, softly blended, a little grainy and tested on real content. This free CSS gradient generator handles all of that visually, with a live preview, and gives you clean CSS — or a PNG or SVG image — in one click.
Pick a type in the Type section. Linear gradients run along a line at any angle: drag the angle dial, use the slider, click one of the angle chips, or focus the dial and use the arrow keys. Radial gradients spread out from a center point: choose an ellipse or circle, pick a size keyword (farthest-corner, closest-side, farthest-side or closest-corner) and set the center with the X/Y sliders or by dragging directly on the preview. Conic gradients sweep around a center like a clock face, with their own start-angle dial and draggable center.
Each color stop appears as a handle on the gradient bar above the preview. Click the bar to add a stop — its color and opacity are worked out from the gradient at that exact point, so it blends in. Drag handles to move them, or select one and use the ← → keys (hold Shift for bigger steps); Delete removes it. In the Color stops list, set each stop's color with the picker or a hex code, its opacity from 0 to 100%, and its exact position. Opacity is what makes layers possible: fade a stop to 0% and whatever is underneath shows through.
By default, browsers mix gradient colors in sRGB, and a blue-to-yellow or red-to-green gradient passes through a dull, greyish middle. The Smoothness section fixes it. Choose OKLab for a perceptually even blend, OKLCH to keep colors vivid by travelling around the hue wheel, OKLCH long hue to go the long way round for rainbow sweeps, or HSL. The exported CSS uses the modern syntax — for example linear-gradient(in oklch 135deg, …) — and adds an sRGB fallback line first, so older browsers still get a gradient.
Turn on Eased gradient to add ease-in-out in-between stops to every segment. Instead of changing color at a constant rate and leaving a visible seam at each stop, the gradient starts and ends gently — the technique behind smooth image overlays and soft hero backgrounds.
Click + Layer to stack another gradient on top. Each layer has its own type, stops, angle, center and blend mode (screen, overlay, multiply, soft-light and more), and the arrows reorder them. Stack a few soft radial "glows" over a dark linear base and you have a mesh-style background in pure CSS — the Aurora mesh, Spotlight and Peach glow presets show how. The export lists every layer in one background declaration, top layer first, with a matching background-blend-mode.
The Grain slider adds a film-grain texture over the whole gradient. It is a tiny inline SVG noise image (feTurbulence) blended with overlay, so it needs no image file, scales to any size and also hides banding on large, subtle gradients — the popular "grainy gradient" look.
Turn on Hard stops to make each color a solid band, and Repeating to repeat the pattern every so many pixels (or degrees for conic gradients). That covers candy stripes and progress-bar stripes (repeating-linear-gradient), ripples and rings (repeating-radial-gradient) and pie charts (conic-gradient with hard stops).
Above the preview, switch between Background, Hero, Card, Buttons, Text and Border. Hero shows the gradient behind a landing-page heading and buttons; Card uses it as card artwork, avatars and a badge; Buttons shows filled, pill, outline and icon buttons; Text clips it to type with background-clip: text; Border draws a gradient outline that keeps its rounded corners. In the Hero, Buttons and Border views, the tool samples the rendered gradient, measures the worst-case WCAG contrast of white and dark text across it, picks the more readable color and shows the ratio with an AA badge.
Six animation presets — Slide, Diagonal, Hue Shift, Breathe, Pulse and Spin — play live in the preview, with a speed control from 1 to 12 seconds. The CSS export includes the complete @keyframes block. Spin animates the top linear layer's angle through a registered @property.
Choose CSS, Tailwind, SCSS, CSS Variable or React above the code and click Copy; the CSS adapts to the preview you are on (a .gradient-text rule for Text, a .gradient-border rule for Border, and so on). Pick a size and click PNG or SVG to download an image — 1920×1080 and 2560×1440 wallpapers, a 1200×630 social image, a square or a story — drawn by the tool itself with layers, opacity, blend modes and grain included. Share link copies a URL that reopens the exact gradient, and Fork & Edit opens it on a ready-made hero page in My Code so you can keep building. Everything auto-saves in your browser and runs entirely on your device.
Step by step
Smoothness
| Color space | CSS | Best for |
|---|---|---|
| sRGB | linear-gradient(90deg, …) | Matching older designs exactly; neighbouring colors |
| OKLab | linear-gradient(in oklab 90deg, …) | Even, natural blends with no grey dead zone |
| OKLCH | linear-gradient(in oklch 90deg, …) | Vivid gradients between distant hues |
| OKLCH long hue | linear-gradient(in oklch longer hue 90deg, …) | Rainbow and spectrum sweeps |
| HSL | linear-gradient(in hsl 90deg, …) | Bright, saturated hue transitions |
If a gradient between two bright colors looks dull halfway, switch the color space to OKLCH. If it shows a hard line at each stop, turn on Eased gradient. If a large, subtle gradient shows bands, add a little grain.
Real-world uses
Got questions?
Pick Linear, Radial or Conic in the Type section, then edit the color stops: click the gradient bar to add a stop, drag a handle to move it, and use the color picker, hex field and opacity box to change it. The preview updates instantly. When it looks right, choose CSS, Tailwind, SCSS, CSS Variable or React above the code and click Copy — or download the gradient as a PNG or SVG image.
Browsers blend gradient colors in the sRGB color space by default, and mixing two saturated colors that sit across the color wheel in sRGB passes through a dull, greyish middle. Switch the Color space to OKLab or OKLCH: the exported CSS then uses linear-gradient(in oklch …), which mixes colors the way the eye perceives them and keeps the middle vivid. The tool also writes an sRGB fallback line first for older browsers.
OKLCH is a perceptual color space with lightness, chroma and hue. A gradient written as linear-gradient(in oklch 90deg, …) interpolates in OKLCH, so colors stay bright and evenly spaced, and "in oklch longer hue" travels the long way round the hue wheel for rainbow sweeps. CSS color interpolation is supported in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+; older browsers use the sRGB fallback line the tool adds automatically.
A normal gradient changes color at a constant rate, which leaves a visible "seam" where it meets each color stop. Eased gradient adds seven in-between stops per segment that follow an ease-in-out curve, mixed in your chosen color space, so the transition starts and ends gently. It is the same technique designers use for smooth hero backgrounds and image overlays.
Move the Grain slider. The tool adds a film-grain texture on top of your gradient as a small SVG noise image (feTurbulence) blended with background-blend-mode: overlay, so the whole effect is pure CSS with no image file. Grain also helps hide banding on large, subtle gradients. PNG and SVG downloads include the grain too.
Click "+ Layer" to add a gradient on top of the current one, then fade one of its stops to 0% opacity so the layers below show through. Stack a few soft radial layers over a linear base to get a mesh-style background, choose a blend mode such as screen or overlay for each upper layer, and reorder layers with the arrows. The CSS export lists every layer in one background declaration, top layer first.
For radial gradients, choose an ellipse or circle and a size keyword — farthest-corner, closest-side, farthest-side or closest-corner — and set the center with the X and Y sliders or by dragging directly on the preview. For conic gradients, set the start angle with the dial and the center the same way. Linear gradients have a draggable angle dial, a slider and one-click angle chips.
Turn on Hard stops to make every color a solid band, then turn on Repeating and set the repeat size for stripes (repeating-linear-gradient) or ripples (repeating-radial-gradient). For a pie chart, use a conic gradient with hard stops — each stop position becomes a slice boundary. The Candy stripes, Pie chart and Ripples presets show each pattern.
Switch the preview to Text to see the gradient clipped to type with background-clip: text; the CSS export includes the -webkit- prefixes Safari needs. Switch to Border to see a card outline and buttons; the export uses the padding-box / border-box technique so the border keeps your border-radius. The Hero, Card and Buttons previews show other real-world uses.
Yes. Pick a size — 1920×1080, 2560×1440, a 1200×630 social image, a 1080×1080 square or a 1080×1920 story — and click PNG or SVG. Both are drawn by the tool itself and include your layers, blend modes, opacity, grain and color space. SVG supports linear and radial layers; use PNG for conic or repeating gradients.
Click Share link to copy a URL that reopens the exact gradient — every layer, stop and setting is stored in the link itself, nothing is uploaded. Click Fork & Edit to open the gradient on a ready-made hero page in My Code, the free online code editor on webdevpuneet.com, where you can keep editing the HTML and CSS. Your work also auto-saves in your browser.
Yes. In the Hero, Buttons and Border previews the tool samples the rendered gradient, measures the worst-case WCAG contrast of white and of dark text across it, picks the more readable one and shows the ratio with an AA, AA-large or Fails badge — so headings on a gradient stay readable.
Yes. The Tailwind tab writes an arbitrary-value class (bg-[…] with spaces as underscores, plus a background-blend-mode class when needed) that works in Tailwind v3 and v4. The React tab writes a style object and a small component. There are also SCSS variable and CSS custom property exports.
Yes — completely free with no sign-up. Everything runs in your browser: gradients, image downloads and share links are generated on your device and nothing is sent to a server.
Changelog
