CSS Gradient Generator
Create beautiful CSS gradients visually and copy the code — linear, radial, and conic.
CSS Code
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
CSS gradients are one of the highest-value tools in web design: they render as pure code, so they scale to any size, cost nothing in file weight, and never blur — a gradient background that would be a heavy image file is instead a few lines of CSS. But the syntax is fiddly, the difference between linear, radial, and conic gradients is easy to muddle, and hand-writing color stops is tedious. This tool lets you build a gradient visually and copies out clean, ready-to-use CSS, so you get the performance and flexibility of code without wrestling with the syntax by hand.
How the tool works
Choose a gradient type — linear, radial, or conic — pick your colors and their stop positions, set the angle or center, and preview the result live. The tool generates the corresponding CSS, which you copy directly into your stylesheet. Because a gradient is code, the output scales to any element size without a separate image, stays razor-sharp on every screen density, and adds essentially nothing to your page weight. Everything runs in your browser.
The three gradient types
linear-gradient(angle, color1, color2, ...)
colors blend along a straight line
135deg is a common diagonal
radial-gradient(shape at position, colors)
colors blend outward from a center point
conic-gradient(from angle at position, colors)
colors sweep around a center (pie-chart-like)
Color stops set where each color lands: 0%–100%.The three types cover distinct jobs. Linear gradients blend along a straight line at a chosen angle and are the workhorse for backgrounds and buttons. Radial gradients radiate outward from a center, ideal for spotlights, glows, and soft vignettes. Conic gradients sweep around a center point like a clock face, which is what makes them uniquely suited to pie charts, color wheels, and loading spinners built in pure CSS. Choosing the wrong type is the usual reason a gradient does not look the way you imagined — each shape blends the colors on a fundamentally different path.
What to know about CSS gradients
- 1Gradients are code, so they scale infinitely and weigh nothing. Unlike a gradient saved as an image, a CSS gradient renders at any element size without blurring, adds virtually nothing to page weight, and needs no separate file request. For any smooth color blend, CSS is almost always the right choice over an image — faster, sharper, and endlessly flexible.
- 2Control the color stops to shape the blend, not just the colors. Where you place each stop determines how the gradient transitions — stops close together create a sharp line, stops far apart create a slow fade. Two stops of the same color at different positions create a solid band. Mastering stop placement is what separates a flat two-color fade from a rich, intentional gradient.
- 3Layer multiple gradients for depth and texture. CSS allows several gradients stacked as layers on one element, with transparency letting lower layers show through. This is how designers build subtle mesh backgrounds, patterns, and lighting effects entirely in CSS — a single flat gradient is just the starting point, not the ceiling.
- 4Add an angle for direction; the default may not be what you expect. A linear gradient with no angle runs top to bottom; 90deg runs left to right; 135deg gives the popular diagonal. If a gradient looks oriented wrong, the angle is almost always why. Setting it explicitly rather than relying on the default avoids the most common gradient surprise.
- 5Watch contrast where text sits on a gradient. A gradient background can pass a contrast check at one end and fail at the other, since the color changes across it. Text over a gradient needs enough contrast against the lightest or darkest point it overlaps, not just the average, or it becomes unreadable in part of its run — check the worst case, not the middle.
Frequently asked questions
What is the difference between linear, radial, and conic gradients?
They blend colors along different paths. A linear gradient transitions along a straight line at an angle you choose — the standard for backgrounds and buttons. A radial gradient radiates outward from a center point, ideal for glows, spotlights, and vignettes. A conic gradient sweeps around a center like the hands of a clock, which makes it uniquely suited to pie charts, color wheels, and CSS spinners. Picking the type that matches the shape you want is the first step to the right result.
Are CSS gradients better than gradient images?
Almost always, yes. A CSS gradient is code, so it scales to any size without blurring, adds essentially nothing to your page weight, needs no separate file download, and can be edited by changing a line rather than re-exporting an image. A gradient saved as an image is heavier, fixed in resolution, and blurs when scaled. Unless you need a texture or effect CSS genuinely cannot produce, the code gradient wins on performance, sharpness, and flexibility.
How do color stops work?
A color stop sets where along the gradient a particular color lands, as a percentage from 0% to 100% or a length. Placing stops close together makes a sharp transition between colors; spacing them apart makes a slow, smooth fade. Repeating the same color at two positions creates a solid band of it. Controlling the stops, not just choosing the colors, is what lets you shape exactly how and where the gradient transitions.
Why is my gradient going in the wrong direction?
Almost always the angle. A linear gradient with no angle specified defaults to running top-to-bottom, which surprises people expecting a diagonal or horizontal blend. Set the angle explicitly — 90deg for left-to-right, 135deg for the common diagonal — to control the direction. If a gradient's orientation looks off, adding or correcting the angle value is nearly always the fix, since the default is rarely the direction people intend.
Can I use gradients behind text?
Yes, but check contrast carefully, because the background color changes across the gradient. Text that is readable over the light end can become unreadable over the dark end, since a single gradient spans a range of colors. Verify that your text has sufficient contrast against the most challenging point it overlaps — the lightest or darkest area beneath it — rather than assuming the average is safe. For long text, a subtler gradient or a solid overlay behind the text is often safer.