CSS Gradient Generator
Linear, radial and conic gradients with OKLCH and PNG export. Runs in your browser.
About this css gradient generator
This gradient generator lets web designers and developers build linear, radial and conic CSS gradients visually, then copy the code or download a PNG at any size. Drag stops along the bar and the preview updates as you work.
Colors mix in OKLCH by default. That matters more than it sounds: in plain sRGB, a gradient from #0000ff to #ffff00 hits flat gray, rgb(128, 128, 128), right in the middle. In OKLCH it stays bright the whole way. You can still switch to OKLab or sRGB, and the CSS ships with fallbacks for older browsers.
Need colors that belong together first? Build a set in the palette generator and bring the HEX values here.
Features
Linear, radial and conic
Angle for linear gradients. Shape, size keyword and center for radial ones. Start angle and center for conic ones.
Draggable, keyboard-friendly stops
Drag handles, or click the bar to add a stop with the color already at that point. Focused handles move with the arrow keys, and Delete removes them.
OKLCH, OKLab or sRGB mixing
OKLCH keeps colors vivid around the hue wheel. OKLab blends in a straight, even line. sRGB matches older tools.
CSS with fallbacks
A solid background color, an sRGB gradient that imitates the modern blend, then the native in oklch gradient. Each browser uses the last line it understands.
PNG export at any size
Pick Full HD, 4K, a square post, a phone story or a social share card, or type your own size up to 8192 pixels per side.
Transparency per stop
Type a color with alpha or drag the opacity slider. The preview sits on a checkerboard so you can see through it.
How to use the css gradient generator
- 1Choose linear, radial or conic, or start from a preset or Random.
- 2Drag or add color stops and set the angle, center and interpolation.
- 3Copy the CSS or Tailwind class, or download a PNG at your size.
When to use it
Hero and section backgrounds
Make a soft background for a landing page and paste the CSS into your stylesheet.
Buttons and cards
Give a call to action a subtle two-color gradient, then add depth with the box shadow generator.
Wallpapers and social images
Download a PNG sized for a desktop, phone or social post. A 4K PNG can get heavy, so compress the image before you upload it.
Pie charts in pure CSS
A conic gradient with hard stops draws a simple pie or progress ring. No SVG, no script.
What is the difference between linear, radial and conic gradients?
A linear gradient changes color along a straight line. The angle sets the direction: 0deg runs bottom to top, 90deg left to right, 180deg top to bottom.
A radial gradient spreads out from a center point as an ellipse or a circle. Its size keyword says where the last stop lands: the closest or farthest side, or the closest or farthest corner.
A conic gradient sweeps around a point like a clock hand. Think color wheels, pie charts and loading rings.
Why does my gradient look gray or muddy in the middle?
Classic CSS gradients blend red, green and blue values in a straight line. When the two ends sit far apart on the color wheel, the halfway point loses its color. Designers call it the gray dead zone.
CSS Color Module Level 4 lets you pick the color space for the blend. OKLCH travels around the hue wheel, so blue to yellow passes through vivid green or pink. OKLab goes in a straight line through a perceptual space. It looks smooth and even. Want a rainbow? Set the hue path to Longer. Try it with two stops of the same color and you get the full 360 degrees.
Will an OKLCH gradient work in older browsers?
Yes, if you keep Fallbacks on. A browser skips any CSS declaration it can't parse and keeps the last one that worked. The generated code stacks three lines for exactly that reason:
- background-color: a solid average color, shown by very old browsers and while images load.
- An sRGB gradient with extra stops slotted between yours, so it looks almost identical to the modern blend.
- The native gradient with in oklch or in oklab, supported since Chrome and Edge 111, Safari 16.2 and Firefox 127.
How do color stops and hard edges work?
Each stop is a color plus a position from 0% to 100%. The browser blends between neighbors. Put two stops at the same position and the color switches instantly. That's how stripes, flags and pie slices are made. Type exact values like 33.3% in the stop list. For the colors themselves, any CSS format works, and the Color Converter helps if you need a value in another format.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Gradient types | Linear, radial and conic | Often linear and radial only |
| Color mixing | OKLCH, OKLab or sRGB, with hue path | sRGB only, gray in the middle |
| Browser support | Solid and sRGB fallbacks included | One line, or outdated vendor prefixes |
| Image export | PNG at any size up to 8192 px | Missing or fixed size |
| Keyboard use | Stops are sliders with arrow keys | Mouse only |
| Privacy and ads | Runs in your browser, no ads | Ad-heavy pages |
Tips
- Hold Shift with the arrow keys to move a focused stop 10% at a time.
- For crisp stripes, choose sRGB. Then no extra in-between stops end up in the fallback.
- Putting text over a gradient? Test the lightest and darkest stop against your text color in the Contrast Checker.
Questions
How do I make a gradient in CSS?
Set a gradient function as the background, for example background: linear-gradient(90deg, #2336ff, #00c2ff). Build it visually here and click Copy CSS to get the exact code with fallbacks.
How do I change the direction of a linear gradient?
Change the angle. 90deg runs left to right, 180deg top to bottom, and 45deg from the bottom left corner toward the top right. Use the slider or the quick angle buttons.
What does in oklch mean in a CSS gradient?
It tells the browser to blend the colors in the OKLCH color space instead of sRGB. Mixes between distant hues stay bright instead of turning gray. The syntax comes from CSS Color Module Level 4.
How do I add more colors to a gradient?
Click anywhere on the stop bar, or press Add stop. Then set the new stop's color and position in the stop list, or drag its handle.
Can I make a gradient with transparency?
Yes. Type a color with alpha, such as rgb(35 54 255 / 0.4), or select a stop and lower the opacity slider. The CSS then uses HEX8, rgba or oklch with an alpha value.
How do I use the gradient in Tailwind CSS?
Click Copy Tailwind class. You get an arbitrary value class like bg-[linear-gradient(...)], with spaces turned into underscores the way Tailwind expects. It works in Tailwind v3 and v4.
How do I download a gradient as an image?
Pick a size or type a width and height, then click Download PNG. The image is drawn in your browser and matches the preview, including OKLCH mixing.
What do the radial size keywords mean?
They set where the gradient ends. Closest side stops at the nearest edge and farthest side at the farthest edge. The corner options reach the nearest or farthest corner. Farthest corner is the CSS default.
Is anything uploaded?
No. The preview, the CSS and the PNG are all made in your browser.