CSS gradient generator
Build linear, radial and conic gradients with up to five color stops, then copy clean CSS or Tailwind code in one click. Free, no sign-up.
How to use a CSS gradient
CSS gradients are backgrounds, so apply the generated code to any element with the background property. A linear gradient blends colors along a straight line at a given angle, a radial gradient blends outward from the center, and a conic gradient sweeps around the center like a color wheel. All three are supported by every modern browser without vendor prefixes.
A quick tip for better-looking gradients: CSS blends colors in sRGB by default, which can make the midpoint look muddy or gray. Adding an in-between color stop fixes it, or use the modern color-interpolation syntax, for example linear-gradient(in oklab, #3dff70, #0ef0cf).
Prefer a gradient image instead of code?
CSS gradients are perfect for buttons and simple backgrounds, but they always look flat and mathematical. If you want the rich, grainy gradients you see in modern branding, rendered with noise, OKLab blending and film grain, use our free gradient generator to download one as a high-res PNG, or browse the gradient library for curated starting points.
Frequently asked questions
How do I make a CSS gradient?
Use the linear-gradient() function as a background, for example background: linear-gradient(135deg, #3dff70 0%, #0ef0cf 100%);. This generator builds the code visually: pick your colors, angle and gradient type, then copy the CSS with one click.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line at a given angle. A radial gradient blends outward from a center point in a circle or ellipse. A conic gradient sweeps colors around a center point, like a color wheel or pie chart.
How do I use a gradient in Tailwind CSS?
For simple gradients, use utilities like bg-linear-to-r with from-, via- and to- colors. For full control over the angle and stop positions, use an arbitrary value like bg-[linear-gradient(135deg,#3dff70,#0ef0cf)]. This generator produces that class for you.
Do CSS gradients work in all browsers?
Yes. linear-gradient() and radial-gradient() are supported in every modern browser, and conic-gradient() has been supported everywhere since 2020. No vendor prefixes are needed anymore.
Why does my gradient look muddy or gray in the middle?
CSS blends colors in sRGB by default, which can pull the midpoint toward gray, especially between complementary colors. Add an in-between color stop, or use linear-gradient(in oklab, …). For organic gradients that are blended in OKLab by default, try the free gradient generator.
Beyond flat CSS gradients
The World of Gradients editor renders grainy, organic gradients with effects and 5K export. Try it free for 14 days, no credit card needed.
Try the editor free