Click the bar to add a stop. Drag stops to move them, or select one and use the arrow keys (Shift for 10%). Press Delete to remove the selected stop.
Edit an existing gradient
How to make a CSS gradient
- Pick a type: linear for a straight blend, radial for a glow that spreads from a point, or conic for a sweep around a center.
- Set the colors. Click the bar to add a stop, drag stops to move them, and adjust each color and its opacity in the list.
- Set the direction. Drag the dial or tap an arrow for linear gradients, or drag the dot on the preview to move the center of a radial or conic gradient.
- Copy the code as plain CSS, gradient text, a Tailwind class or a CSS variable. You can also download a PNG at any size, up to 8000 pixels on a side.
Linear, radial and conic gradients
Linear blends along a straight line at any angle.
Radial spreads outward from a center point as a circle or ellipse.
Conic sweeps colors around a center, like a color wheel.
Repeating tiles the stops, which is how CSS stripes are made.
Gradient syntax at a glance
background: linear-gradient(135deg, #228fcb 0%, #f0567a 100%); background: radial-gradient(circle at 30% 50%, #ffe29f, #6b2d8f); background: conic-gradient(from 90deg at 50% 50%, red, yellow, red); background: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px);
In linear-gradient, 0deg points up and angles turn clockwise, so 90deg runs left to right. Each color can take a position. Two stops at the same position create a hard edge instead of a blend.
sRGB, OKLab and OKLCH: why some gradients look muddy
By default, browsers blend gradient colors in sRGB. That's fine for similar colors, but blending across the color wheel, like blue to yellow, passes through a dull gray in the middle. Modern CSS lets you choose a better color space:
| Blend in | What you get | Example |
|---|---|---|
| sRGB | The classic look. It works everywhere but can dip gray between distant colors. | |
| OKLab | Even, natural-looking brightness from end to end. Best all-round choice. | |
| OKLCH | Keeps colors saturated by traveling around the hue wheel. Great for vivid, rainbow-like blends. |
Color-space blending is supported in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+. With "Include fallback color" turned on, the generated CSS also includes a classic sRGB version first, so older browsers still show a gradient.
Tips for better gradients
- Stay close on the color wheel for subtle backgrounds, and use OKLab or OKLCH when you blend across it.
- Check text contrast. The preview shows the worst-case contrast ratio for your text across the whole gradient. Aim for at least 4.5:1 for body text and 3:1 for large headings.
- Use transparency for overlays. A gradient from a dark color at 70% opacity to fully transparent, placed over a photo, makes text readable without hiding the image.
- Turn on dithering for images. Smooth gradients stored as 8-bit PNG can show visible bands, and a tiny amount of noise hides them.
Frequently asked questions
How do I use the CSS on my site?
Paste the code into the CSS rule for the element you want to style, such as a body, header or button class. The background line sets the gradient, and the fallback color above it shows in very old browsers or email clients that don't support gradients.
How do I make gradient text?
Choose the Gradient text tab. It adds background-clip: text and a transparent text color, so the gradient shows through the letters. It works in all modern browsers.
Does the PNG match the CSS exactly?
Yes. The image is drawn pixel by pixel using the same geometry and color-space rules as the CSS specification, including OKLab and OKLCH blending, at whatever size you choose. Changing the aspect ratio changes a linear gradient's line length, just as it would on a web page.
Can I edit a gradient I already have?
Yes. Open "Edit an existing gradient," paste your CSS (linear, radial or conic, repeating or not) and click Load gradient. Colors can be in any CSS format, including named colors, HEX, RGB, HSL and OKLCH.
How do I share a gradient?
Click Copy share link. The link stores the whole gradient in the address, so anyone who opens it sees the same gradient ready to edit. Nothing is saved on a server.
Does it work with Tailwind CSS?
Yes. The Tailwind tab outputs an arbitrary-value class like bg-[linear-gradient(...)] that works in Tailwind 3 and 4 with any number of stops, color spaces and angles.