CSS Gradient Generator

About the CSS Gradient Generator

What is a CSS gradient generator?

A CSS gradient is a background the browser paints from a rule instead of an image file. You name two or more colors, say where each one sits, and the browser fills in every shade between them. Nothing gets downloaded, nothing goes blurry when the box gets bigger, and changing the whole look means editing a few characters. A generator is simply a faster way to write that rule, because nobody should have to picture what linear-gradient(217deg, #f97316 12%, #ec4899 88%) looks like from memory.

This tool covers all three gradient shapes CSS actually has, plus the one it doesn't. A linear gradient runs along a straight line at whatever angle you set. A radial one spreads out from a point as a circle or an ellipse. A conic one sweeps around a center the way a pie chart does, which is where color wheels and those thin light sweeps on cards come from. Any of the three can be told to repeat, and that single checkbox turns a gradient into stripes or rings.

The fourth mode is the mesh gradient, the soft multicolor wash you see behind so many landing pages. CSS has no mesh-gradient() function, so a mesh is really several radial gradients stacked on top of each other, each one fading out into nothing. Getting that right by hand means juggling a position, a color and a falloff for every blob at once. Here you drag sliders and watch it happen, and the tool writes the stack for you. You can also set the whole thing drifting, which adds the keyframes to the output.

There's one thing here that most gradient tools skip, and it changes the result more than anything else on the page. Blend blue into yellow the old way and the middle turns a dull gray, because sRGB numbers aren't spaced the way human vision is. CSS can now blend in Oklab or Oklch instead, where the same two colors meet in a bright green. Switch the blend space and watch the ramp under the preview. It's the fastest way we know to see what perceptual color spaces are actually for.

Everything runs in your browser. There's no account, no watermark, no export limit, and the gradients are yours to use in commercial work.

How to Use This Tool

1. Start from the gallery. Scroll the 226 tiles, filter them by mood, or search a name or a hex code. Click one and it loads into the editor above. Every tile is painted with the real CSS, so what you see in the swatch is what you'll get.
2. Pick a shape. Linear suits page and section backgrounds. Radial works for spotlights and soft glows behind a card. Conic is for color wheels, pie shapes and sweeping highlights. Mesh is the soft multicolor wash for a hero.
3. For a mesh, work the blobs. Pick the background the blobs fade into, then set each blob's color, where it sits and how far it spreads. Three or four is usually the sweet spot, and dark backgrounds with bright blobs read better than the reverse.
4. Set the direction. A linear gradient uses an angle, where 0deg points up and the dial turns clockwise. A radial or conic one uses a center point instead, so drag it off center for something less symmetrical.
5. Work the color stops. Click anywhere on the ramp under the preview to drop a new stop, then drag the handles to move them. Each stop also gets its own row with a color box, a position and an opacity slider. Keyboard works too, so tab to a handle and use the arrow keys.
6. Choose how it blends. Leave it on sRGB to match what browsers have always done. Switch to Oklab for the smoothest transition, or Oklch when you want the colors to stay strong across the middle.
7. Check the text. The bar under the ramp reports the weakest contrast anywhere along the gradient, so you find the dead spot before your readers do.
8. Take it away. Copy the CSS, or switch the dropdown to SCSS, Tailwind or a JS style object. Need a picture instead? Download a PNG at wallpaper, social or story size, or an SVG that stays sharp forever.

Common Use Cases

Gradients came back into fashion around 2017 and never really left, mostly because they cost nothing to ship. Here's where we see them earn their keep.

• Hero sections. A large, slow gradient behind a headline gives a page a mood without an image request. A mesh works especially well here, and a few percent of grain hides any banding on a big area.
• Ambient motion. A slowly drifting gradient makes a landing page feel alive for a few hundred bytes, which is a better trade than a background video.
• Buttons and cards. A short two stop gradient at 135deg reads as depth in a way a flat fill doesn't, and it survives a dark theme better than a drop shadow. Want the color on the edge instead of the fill? That's the CSS Gradient Border Generator.
• Social and video art. The 1200 by 630 and 1080 by 1920 presets are there for open graph images and story backgrounds, which is what the PNG export is really for.
• Headlines. The same gradient poured into the letters rather than behind them is a different property, so the CSS Gradient Text Generator handles that one.
• Placeholders and skeletons. A repeating linear gradient at a shallow angle is the standard shimmer effect, and it needs no library.
• Charts and dials. A conic gradient with hard stops draws a pie or donut segment with no SVG at all.
• Design tokens. Copy the SCSS mixin once, use the same gradient in twenty places, change it in one.
• Overlays on photos. Set a stop to zero opacity and you get a fade that keeps a caption readable over the busy part of an image.

Frequently Asked Questions

How do I create a CSS gradient background?

Set the background-image property to a gradient function. The shortest version is background-image: linear-gradient(#f97316, #ec4899);, which fades the first color into the second from top to bottom. Add an angle to change the direction and a percentage after each color to say where it sits, like linear-gradient(135deg, #f97316 0%, #ec4899 100%). Pick your colors above and the tool writes that line for you.

What is the difference between linear, radial and conic gradients?

A linear gradient blends along a straight line, so the color changes as you move across the box in one direction. A radial gradient blends outward from a center point, giving you a circle or an ellipse of color. A conic gradient blends around that center point instead, so the color changes as you sweep in a circle rather than as you move away from the middle. Conic is the one that makes color wheels and pie charts.

How does the angle in linear-gradient work?

0deg points to the top of the box and the angle increases clockwise. So 90deg runs left to right, 180deg runs top to bottom, and 270deg runs right to left. Note that this is not the same convention as a math class, where angles start at the right and turn counterclockwise. CSS also accepts keywords such as to right and to bottom left, and this tool switches to those automatically whenever your angle lands on one.

Why does my gradient look gray or muddy in the middle?

Because sRGB, the color space browsers used by default for years, isn't spaced the way your eye is. Interpolating straight through its numbers takes a shortcut across the middle of the color solid, and on a wide jump like blue to yellow that shortcut lands on gray. Set the blend to Oklab or Oklch above and the middle stays colorful. If you'd rather not rely on a newer CSS feature, raise the extra color stops slider instead and the tool bakes that smooth blend into plain hex stops.

What does in oklch mean in a CSS gradient?

It tells the browser which color space to do the blending in. linear-gradient(in oklch, red, blue) converts both colors to Oklch, finds the shades between them there, and converts back. Oklch is built so equal steps in the numbers look like equal steps to a person, which is why gradients through it stay bright instead of sagging in the middle. It works in Chrome 111, Safari 16.2 and Firefox 128 and later.

What is a mesh gradient?

A mesh gradient is a background where several colors bleed into each other from different points, rather than running along one line or out from one center. It's the soft, cloudy multicolor look that took over landing pages and app splash screens. CSS has no dedicated function for it, so the usual technique is to stack several radial-gradient() layers on one element, each fading to transparent, over a solid background color. Switch the shape to Mesh above and the tool builds that stack for you, blob by blob.

How do I make an animated gradient background in CSS?

You can't animate the colors inside a gradient directly, because a gradient is an image rather than a set of animatable properties. The trick everyone uses is to make the background bigger than the element and slide it around. Set background-size: 300% 300%, then animate background-position from one side to the other and back. Turn on Animate it above and the tool writes both the rule and the @keyframes block. Keep the loop slow, around ten seconds or more, and remember that anyone who has asked their system for reduced motion should not see it move.

Can I download a gradient as a PNG image?

Yes. Choose a size in the panel and press Download PNG. The image is drawn in your browser at full resolution using the same colors, angle and blend space as the preview, so it matches what you see. There's an SVG option too, which stays sharp at any size and covers linear and radial gradients. Conic gradients export as PNG only.

How do I make a gradient that repeats?

Drag the last color stop below 100%, then turn on Repeat the pattern. Whatever falls between the first and last stop becomes one tile, and the browser repeats it across the whole box. A gradient that runs from 0% to 20% repeats five times. This is how you build stripes, rings and shimmer effects with nothing but CSS.

How many colors can a CSS gradient have?

The specification doesn't set a limit, and this tool allows up to twelve stops. In practice two or three does almost every job. Past about six, a background stops reading as a gradient and starts reading as noise, which is why the tool nudges you when you get there.

Do CSS gradients slow down a page?

Far less than the image they replace. A gradient is a few dozen bytes of CSS with no extra network request, no decode step and no layout shift while it loads. The one thing worth watching is animating a gradient, since the browser has to repaint it every frame. If you need movement, animate the position of a larger background rather than the color stops themselves.

Is white text readable on a gradient?

It depends entirely on the light end, and that's the trap. People check the contrast against the average color and miss the one corner where the gradient goes pale. The bar under the ramp above measures every point along the gradient and reports the worst one, along with whether it clears the WCAG AA threshold of 4.5 to 1 for body text or 3 to 1 for large headings.

Can I use these gradients with Tailwind CSS?

Yes. Switch the output dropdown to Tailwind and you get an arbitrary value class you can paste straight onto an element. That form works in Tailwind 3 and 4 without touching your config. If you'd rather register the gradient as a real theme value, take the CSS output and drop it into your theme file instead.

Is my work private?

Completely. Every calculation happens in your browser, including the image export, which is drawn on a canvas on your own machine. No colors, no gradients and no files are ever sent to us, and nothing is stored. The share button is the one exception, and even then the design is packed into the link itself rather than saved anywhere.