CSS Gradient Generator: Create Smooth, Layered & Animated Gradients (Free Guide)

A CSS gradient is one line of code — until you want it to look good. The colors turn grey in the middle. A big background shows ugly bands. You want a soft glow on top of another gradient, a pie chart, an animated button, gradient text, a border that keeps its rounded corners — and then the same thing again as Tailwind classes or a React style object.

The free CSS Gradient Generator on webdevpuneet.com handles all of it visually. You build linear, radial and conic gradients, blend them in a smooth color space like OKLCH, stack up to six layers, add film grain, animate the result, check text contrast, and copy the code as CSS, Tailwind, SCSS, a CSS variable or a React component — or download it as a PNG or SVG. When you want to go further, Fork & Edit opens it on a ready-made page in My Code so you can keep editing the HTML and CSS until it is completely yours.

This guide shows every feature with 15 live demos. Each demo is real code the generator produces: use the HTML, CSS and JS tabs in its top bar to read it, and the Fork & Edit button to open it in My Code.

How to make a CSS gradient in 60 seconds

1. Open the CSS Gradient Generator. It starts with a ready-made three-color gradient.
2. Pick Linear, Radial or Conic in the Type section.
3. Edit the color stops: click the gradient bar to add one, drag a handle to move it, and use the color picker, hex field and opacity box to change it.
4. Choose OKLCH under Smoothness so the colors stay vivid in the middle.
5. Pick CSS, Tailwind, SCSS, CSS Variable or React above the code and click Copy — or click Fork & Edit to keep building.

Here is what you get before you change anything: the default gradient on a hero section, exactly as the Fork & Edit button hands it to My Code. Open the CSS tab and notice the two background lines — the first is an sRGB fallback for old browsers, the second is the smooth OKLCH version.

A quick tour of the gradient generator

The tool is split into two columns. On the left are the controls, from top to bottom: Layers, Type, Color stops, Smoothness, Grain, Animate and Presets. On the right is a big live preview with six view modes — Background, Hero, Card, Buttons, Text and Border — plus the export code, the image download options and the Share link and Fork & Edit buttons. Every change updates the preview and the code instantly, and your work auto-saves in your browser.

16 presets to start from

Starting from something good is faster than starting from nothing. The Presets section has sixteen one-click gradients, and each one also sets the color space, easing and grain that suit it:

• Simple linear gradients — Cosmic, Sunset, Ocean, Forest, Fire, Neon, Aurora and Rose.
• Layered looks — Aurora mesh, Spotlight and Peach glow, built from several stacked layers.
• Texture and smoothness — Grainy sunset (eased, with grain) and Rainbow (OKLCH long hue).
• Patterns — Candy stripes, Pie chart and Ripples, using hard stops and repeating gradients.

Click Randomize to swap in random colors for the selected layer, and Reset to return to the default.

Linear, radial and conic gradients explained

The three gradient types are three different ways of spreading colors across a box. The generator gives each type the controls that matter for it.

Type	Colors change…	Controls in the tool	Good for
Linear	along a straight line	Draggable angle dial, angle slider, one-click angle chips (0°, 45°, 90°, 135°, 180°, 270°)	Backgrounds, buttons, hero sections, overlays
Radial	outward from a center point	Ellipse or circle, size keyword, center X/Y — or drag the center on the preview	Glows, spotlights, vignettes, mesh layers
Conic	around a center point, like a clock hand	Start angle dial, center X/Y — or drag the center on the preview	Pie charts, color wheels, shiny metallic effects

For radial gradients you can pick farthest-corner, closest-side, farthest-side or closest-corner, which changes how far the gradient stretches before it ends. The easiest way to place the center is to drag it directly on the preview. The demo below does the same thing in plain JavaScript: the radial gradient’s center is just two CSS variables, --x and --y, updated as you move. Move your mouse (or finger) over it.

Color stops: add, drag, fade and nudge

A gradient is a list of color stops. In the generator you can:

• Click the gradient bar to add a stop. It starts with the color the gradient already has at that point, so adding a stop never changes how it looks until you edit it.
• Drag a handle to move a stop, or focus it and use the ← → arrow keys (hold Shift to move by 10%). Press Delete to remove it.
• Change a stop’s color with the picker or by typing a hex value, and its opacity from 0 to 100%. Opacity is what makes layered gradients work — more on that below.
• Use the position slider next to each stop for exact placement, or + Add to insert a stop halfway along the gradient.

Why does my CSS gradient look grey in the middle?

This is the most common gradient complaint, and it is not your colors — it is the math. Browsers blend gradient colors in the sRGB color space by default. When two bright colors sit far apart on the color wheel, such as blue and yellow, sRGB averages their red, green and blue values and lands on a dull grey-olive in the middle.

The fix is to blend in a color space designed around how people see color. The Smoothness section lets you switch with one click, and the exported CSS uses the modern linear-gradient(in oklch …) syntax. Compare the same two colors blended four ways:

Color space	What it does	Use it when
sRGB	The browser default. Mixes red, green and blue values directly.	You need identical results everywhere, or the two colors are close together.
OKLab	Perceptually even. Removes the grey dead zone without changing hue much.	Subtle, natural-looking blends and soft overlays.
OKLCH	Keeps lightness and saturation steady while travelling around the hue wheel.	Vivid gradients between colors that sit far apart. This is the generator’s default.
OKLCH long	Goes the long way round the hue wheel.	Rainbow sweeps and color wheels.
HSL	Hue-based mixing. Bright, but less even than OKLCH.	A punchy, saturated look, as in the demo above.

Browser support and the automatic fallback

CSS color interpolation (in oklch, in oklab, in hsl) works in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+. You do not need to worry about older browsers: whenever you choose a color space other than sRGB, the generator writes a plain sRGB background line first and the modern one second. Browsers that do not understand the second line ignore it and use the first.

.gradient {
  /* sRGB fallback for browsers without CSS color-space interpolation */
  background: linear-gradient(135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);
  background: linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);
}

Rainbow gradients with OKLCH long hue

Choose OKLCH long and the gradient takes the long route around the hue wheel instead of the short one. That turns two almost identical colors into a full rainbow, with no extra stops. The Rainbow preset below is just two reds, #ff4d6d and #ff5e4d, written as in oklch longer hue.

Eased gradients: remove the harsh line at each color stop

Look closely at a normal gradient with three colors and you can often see a faint line where it passes through the middle stop. That is because the color changes at a constant rate and then suddenly changes direction. Turn on Eased gradient and the generator adds seven in-between stops per segment that follow an ease-in-out curve, mixed in your chosen color space, so each transition starts and ends gently. It is the same technique used for smooth hero backgrounds and the dark gradients laid over photos.

The trade-off is longer CSS — the eased bar above is 17 stops instead of 3 — which is fine for a background and not something you would write by hand.

How to make a grainy gradient in CSS

The soft, noisy, film-grain look is everywhere in modern design, and it has a practical benefit: grain hides banding, the visible steps that appear in large, subtle gradients. Move the Grain slider (0–60%) and the generator adds a tiny SVG noise image on top of your gradient and blends it with background-blend-mode: overlay. It is pure CSS — no image file to host — and PNG and SVG downloads include the grain too. Drag the slider in the demo to see the difference.

Layered gradients: build a mesh-style background

One gradient is a start. The real power is layers: the generator stacks up to six gradients on top of each other, and the CSS export lists them all in one background declaration, top layer first.

• Click + Layer to add a soft radial glow on top of the current gradient. New layers start with a random color that fades to 0% opacity, which is what lets the layers underneath show through.
• Select any layer to edit its type, angle, center and stops. Use the ↑ ↓ buttons to reorder layers and × to remove one.
• Give each upper layer a blend mode — screen, overlay, multiply, soft-light and a dozen more — for effects plain stacking cannot do.

The Aurora mesh preset is three soft radial glows over a dark linear base, mixed in OKLab with a touch of grain. Four layers, one background property:

If you want a truly organic, blob-style mesh with draggable anchor points, try the sister tool, the Mesh Gradient Generator. For most page backgrounds, stacked radial layers in this tool are lighter and easier to export.

CSS stripes, pie charts and ripples with hard stops

Two checkboxes in the Type section turn smooth gradients into patterns:

• Hard stops turns every color into a solid band with a sharp edge. On a conic gradient, each stop position becomes a slice boundary — a pie chart.
• Repeating repeats the gradient every N pixels (or degrees for conic), using repeating-linear-gradient, repeating-radial-gradient or repeating-conic-gradient.

Combine them for candy stripes, or use repeating alone for ripples. The Candy stripes, Pie chart and Ripples presets show each pattern, and none of them needs an image:

Animated gradient CSS: six one-click animations

The Animate section turns any gradient into a moving one and writes the @keyframes for you. There are six animations and a speed slider from 1 to 12 seconds:

• Slide — the gradient drifts left and right (background-position on an oversized background).
• Diagonal — the same idea, moving corner to corner.
• Hue Shift — the whole gradient cycles through every hue with filter: hue-rotate().
• Breathe — the gradient swells and shrinks.
• Pulse — the opacity fades in and out.
• Spin — the angle of the top linear layer rotates continuously. It uses a registered @property, which works in Chrome, Edge, Safari 16.4+ and Firefox 128+.

Gradient animation is easy to add, but always respect people who ask for less motion. The demo’s CSS ends with a prefers-reduced-motion rule that switches the animation off, and it is worth copying that into your own project:

@media (prefers-reduced-motion: reduce) {
  .gradient { animation: none; }
}

Real-world previews: text, borders, buttons, cards and heroes

A gradient looks different on a button than it does on a full-screen background, so the preview has six modes. Each one changes the exported CSS to match.

Gradient text with background-clip

Switch to Text and the gradient is clipped to the letters. The export includes the -webkit- prefixes Safari still needs, and the same sRGB fallback line as before.

.gradient-text {
  background: linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

Gradient border that keeps its rounded corners

The border-image trick breaks border-radius. The Border mode uses the padding-box / border-box technique instead: a solid layer covers the inside, the gradient shows through the transparent border, and the rounded corners survive.

To change the thickness, edit the 2px in the exported border line, or the background color of the inner linear-gradient(#ffffff, #ffffff) layer to match a dark card.

Gradient buttons and the contrast check

Text on a gradient is easy to get wrong because the background changes underneath it. In the Hero, Buttons and Border previews the generator renders the gradient, measures the worst-case WCAG contrast of white text and of dark text across it, picks the more readable one and shows the ratio with an AA, AA large or Fails badge. The exported CSS already contains the winning color.

The Neon button above only reaches 3:1, so it passes for large text but not for small body copy — exactly the kind of thing that is hard to see by eye. For a deeper audit of any color pair, use the Color Contrast Checker.

Copy the code: CSS, Tailwind, SCSS, CSS variable and React

Above the code box are five export tabs. Every tab describes the same gradient, in the format your project already uses. Here is the Rose gradient in all five:

CSS

.gradient {
  /* sRGB fallback for browsers without CSS color-space interpolation */
  background: linear-gradient(135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);
  background: linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);
}

Tailwind CSS

The Tailwind tab writes one arbitrary-value class — spaces become underscores — that works in Tailwind v3 and v4. When your gradient uses blend modes the tab adds a [background-blend-mode:…] class, and in Text mode it adds bg-clip-text text-transparent.

<div class="bg-[linear-gradient(in_oklch_135deg,_#f64f59_0%,_#c471ed_50%,_#12c2e9_100%)]"></div>

SCSS

$gradient:
  linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);

.gradient {
  background: $gradient;
}

CSS variable

:root {
  --gradient:
    linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);
}

.gradient {
  background: var(--gradient);
}

React

const gradientStyle = {
  background: `linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%)`,
};

export default function Gradient({ children }) {
  return <div style={gradientStyle}>{children}</div>;
}

The React version drops straight into Next.js, Vite or Create React App. The CSS variable version is the best choice for a design system, because one value can theme your whole interface:

Click the four themes. The card header, the badge, the progress bar and the button all read var(--gradient), so swapping one custom property re-themes everything. Fork this demo to see how little code it takes.

Download a gradient as a PNG or SVG image

Sometimes you need a picture, not CSS: a wallpaper, a social card background, a slide or a placeholder. Pick a size, then click PNG or SVG:

• 1920×1080 and 2560×1440 — desktop wallpapers and video backgrounds.
• 1200×630 — the standard Open Graph / social share image.
• 1080×1080 — a square post.
• 1080×1920 — a story or phone wallpaper.

The images are drawn by the tool itself in your browser and include your layers, blend modes, opacity, grain and color space. SVG supports linear and radial layers; for conic or repeating gradients, use PNG. Need a full social card with text? Add the gradient as the background in the OG Image Generator.

Share a gradient with a link

Click Share link to copy a URL that reopens your exact gradient — every layer, stop, color space and setting is stored in the link itself after the #, so nothing is uploaded to a server. Send it to a teammate or client, or bookmark it as your own library of favorites. And because the tool auto-saves in your browser, you will find your last gradient waiting next time.

Fork & Edit: make the gradient completely yours in My Code

Copying a CSS snippet is perfect when you are dropping a gradient into an existing project. When you want to build something around it, use Fork & Edit. Here is what happens:

1. Click Fork & Edit in the preview bar. My Code, the free in-browser code editor on webdevpuneet.com, opens in a new tab.
2. Your gradient arrives as a new snippet: a ready-made hero section in the HTML pane and the gradient, the readable text color, the button and any animation keyframes in the CSS pane, with a live preview beside them.
3. Make it yours. Change the heading and button text, rename the classes, swap the hero for a card or a navbar, add your own fonts, drop in a script. The preview updates as you type.
4. The snippet is saved in your browser, so it is still there tomorrow. You can back it up to a private GitHub Gist if you like.
5. When it is ready, export it from My Code as a standalone HTML file, a React JSX component or a React + Tailwind component.

Nothing is uploaded when you fork: the generator hands the snippet to My Code through your browser’s local storage. Every demo in this article has the same Fork & Edit button in its top bar, so you can start from any of them — the animated tiles, the CSS-variable theme switcher or the landing page below — and edit it into your own design.

How to use a generated gradient in your projects

A gradient is just a background value, so it fits anywhere. Here is how it looks in the most common setups, and the demo below combines four generator exports — a layered mesh background with grain, gradient text, a gradient button and a gradient-border card — into one landing section.

• Plain HTML and CSS. Paste the CSS export into your stylesheet and add the class to any element. This works in WordPress themes, Webflow custom code, static sites.
• Tailwind CSS. Paste the one-line class from the Tailwind tab. For a gradient you reuse a lot, put the CSS variable export in your global CSS and write bg-[image:var(--gradient)] in the markup.
• React, Next.js and Vite. Use the React tab’s style object, or drop the CSS export into a CSS Module and import it.
• Sass projects. Use the SCSS tab and reuse $gradient anywhere in your partials.
• Design systems. Use the CSS Variable tab and define one custom property per brand gradient, as in the theme demo above.
• Images and slides. Download a PNG or SVG and place it in Figma, Canva, PowerPoint or an <img> tag.

Looking for ready-made components that use gradients? Browse the UI Snippets library — over 2,000 copy-paste components, including gradient buttons, borders and hero sections.

Tips for better CSS gradients

• Default to OKLCH. It is the single biggest upgrade to a gradient between two distant colors. Keep sRGB for subtle, close-together colors.
• Limit it to two or three colors. Gradients with many unrelated colors look busy. If you need richness, use layers instead of more stops.
• Add a little grain to large backgrounds. Even 8–15% hides banding on big, smooth gradients.
• Use Eased for overlays on photos. A dark-to-transparent gradient behind white text looks far more natural when eased.
• Check contrast every time. Text on a gradient has to pass at its worst spot, not its average.
• Keep the sRGB fallback line. It costs one line and protects older browsers.
• Respect reduced motion. Wrap animation in a prefers-reduced-motion rule, and keep loops slow — 6–12 seconds feels calmer than 2.
• Keep animated areas small on low-end phones. Pulse (opacity) is the cheapest animation; Slide, Diagonal, Breathe and Hue Shift repaint more, so use them on a card or a button rather than a full-screen background.

Frequently asked questions

Is the CSS gradient generator free?

Yes. It is completely free with no sign-up, and the code and images you create are yours to use in personal and commercial projects. Everything runs in your browser, so your gradients, downloads and share links are generated on your device and never sent to a server.

How do I create a CSS gradient online?

Open the generator, choose Linear, Radial or Conic, and edit the color stops: click the gradient bar to add one, drag a handle to move it, and use the color picker, hex field and opacity box to change it. Choose CSS, Tailwind, SCSS, CSS Variable or React above the code and click Copy, or download the gradient as a PNG or SVG.

What is an OKLCH gradient and which browsers support it?

OKLCH is a perceptual color space with lightness, chroma and hue. A gradient written as linear-gradient(in oklch 90deg, …) stays bright and evenly spaced instead of going grey in the middle. It works in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+, and the generator writes an sRGB fallback line first so older browsers still show a gradient.

How do I make a gradient with more than two colors?

Click anywhere on the gradient bar to add a stop, then change its color. You can also click + Add to insert a stop halfway along the gradient. For richer results, add layers instead of piling on stops.

How do I make a radial or conic gradient?

Pick Radial or Conic in the Type section. Radial gradients have an ellipse or circle shape and a size keyword; conic gradients have a start angle. For both, set the center with the X and Y sliders or by dragging it on the preview.

How do I make a CSS gradient animation?

Open the Animate section and choose Slide, Diagonal, Hue Shift, Breathe, Pulse or Spin, then set the speed from 1 to 12 seconds. The CSS export includes the animation property and the @keyframes, ready to paste.

Can I get Tailwind or React code for my gradient?

Yes. The Tailwind tab writes an arbitrary-value class that works in Tailwind v3 and v4, and the React tab writes a style object and a small component. There are also SCSS variable and CSS custom property exports.

How do I make gradient text in CSS?

Switch the preview to Text. The export uses background-clip: text with the -webkit- prefixes Safari needs, plus color: transparent.

Can I download a gradient as an image?

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. SVG supports linear and radial layers; use PNG for conic or repeating gradients.

What happens when I click Fork & Edit?

Your gradient opens in My Code as a new snippet, on a ready-made hero page with HTML and CSS panes and a live preview. It is saved in your browser, you can keep editing it, and you can export it later as an HTML file or a React component.

Try it yourself

Open the CSS Gradient Generator, pick a preset, switch to OKLCH, add a layer or some grain, and copy the code — or click Fork & Edit and keep building. For more color and CSS tools, try the Color Palette Generator, the CSS Animation Generator, the Box Shadow Generator and the Mesh Gradient Generator, or see all the free CSS tools on webdevpuneet.com.