CSS gradient generator
Build linear, radial, conic and repeating gradients with up to eight color stops, transparency and smoother OKLCH blending. Check which text color stays readable, then copy clean CSS or a Tailwind class.
- Live preview as you edit
- Text contrast checked at the weakest point
- Runs in your browser
Your gradient
Linear 135°
- TypeLinearStraight line
- Direction135°Flows down and to the right
- Color stops3 stopsBlended in sRGB
- Paste intobackgroundAny element
Build your gradient
—
—
—
—
Type and direction
The same type and angle as the panel at the top.
Color stops
Up to 8. Opacity below 100% shows the checkerboard behind it.
Output
How the CSS is written.
background: linear-gradient(135deg, #4f46e5 0%, #c026d3 50%, #f97316 100%);
Preview
The checkerboard shows through transparent parts.
Presets
Starting points. Loading one replaces the current gradient.
How CSS gradients work
A gradient is an image the browser draws from a few numbers, so it needs no file and stays sharp at any size.
A gradient is an image
It goes in background or background-image, not background-color. You can layer several gradients, separated by commas, over each other or over a photo.
Stops decide where colors sit
Each stop is a color at a position from 0% to 100%. The browser blends between neighbours; two stops at the same position make a sharp edge.
The color space changes the middle
Classic sRGB blending can dull the middle between distant hues. OKLCH blending, in browsers since 2023 and 2024, keeps it bright and even.
Text needs contrast everywhere
Text that is readable on one end can fail on the other. WCAG asks for 4.5:1 for normal text and 3:1 for large text, at every point under the text.
The gradient syntax at a glance
The functions and values this generator writes, and when to use each one.
| Syntax | What it does | Good for |
|---|---|---|
linear-gradient(135deg, …) |
Colors along a straight line. 0deg points up, 90deg right, 180deg down | Hero backgrounds, buttons, photo overlays |
radial-gradient(circle at 50% 50%, …) |
Colors spread out from a point, as a circle or an ellipse | Spotlights, soft glows, vignettes |
conic-gradient(from 0deg, …) |
Colors sweep around a center point, like a clock hand | Pie charts, color wheels, loading rings |
repeating-linear-gradient(…) |
Repeats the stops until the box is full. Works for radial and conic too | Stripes, progress patterns, rulers |
in oklch |
Blends the colors in a perceptual color space instead of sRGB | Bright gradients between distant hues |
#rrggbbaa |
A hex color with opacity in the last two digits (00 to ff) | Fades, overlays, glass effects |
How to use this generator
From an idea to a line of CSS in four steps.
Pick a type and direction
Linear, radial or conic, then the angle or the center point. Turn on repeat for stripes and patterns.
Set the colors
Up to 8 stops with opacity and position. Click the color bar to add a stop at that point; two stops at one position make a hard edge.
Read the checks
They show the best text color with its contrast at the weakest point, and warn when the middle may turn gray.
Copy the code
Copy the CSS or the Tailwind class, or copy a link that opens this exact gradient.
What this tool does, and what it doesn't
A plain list, so you know exactly what to expect.
This tool does
- Write linear, radial, conic and repeating gradients
- Handle up to 8 stops with opacity and hard edges
- Blend in OKLCH or OKLab with an sRGB line first
- Check text contrast along the gradient
- Give you CSS, a Tailwind class or a share link
- Remember your last gradient in this browser
This tool does not
- Make mesh gradients or noise textures
- Export PNG, JPG or SVG images
- Write animations
- Measure contrast on your real page
- Store your gradients on our server
- Need an account
Where your data goes
Nowhere outside your browser. The CSS is generated on this page and your last gradient is saved in your browser's local storage so a reload keeps it; Reset clears it. A share link holds the settings after the # in the address, which browsers do not send to the server. Like any website, our server keeps normal access logs of page visits, as described in our privacy policy.
Why your gradient might look unexpected
The six surprises people run into most, and what each one means.
Gray or muddy middle
sRGB blending between distant hues passes through gray. Switch to OKLCH or add a brighter middle stop.
Visible bands
Long, subtle gradients can show steps on 8-bit screens. Add a little more contrast or a middle stop.
A sharp line appears
Two stops share a position, which makes a hard edge. Move one of them to blend again.
Text is hard to read
Contrast changes along a gradient. Check the weakest point or add a dark overlay behind the text.
It does not animate on hover
Browsers swap gradients instead of blending them. Fade a second layer with opacity instead.
Solid color in an email
Outlook for Windows ignores CSS gradients. Keep the fallback color on for email templates.
Questions about CSS gradients
How do I make part of a gradient transparent?
Lower the opacity of a color stop. The generator writes it as an 8-digit hex color, such as #0f172a00 for fully transparent, which all current browsers support. Fading to the same color at 0% opacity, rather than the keyword transparent, gives the cleanest edge, for example for a dark overlay at the bottom of a photo.
What does "in oklch" do, and is it safe to use?
It tells the browser to blend the colors in the OKLCH color space instead of sRGB, which keeps the middle of a gradient bright instead of gray. Chrome and Edge 111, Safari 16.2 and Firefox 127 support it. The generator writes a plain sRGB line first, so older browsers still get a gradient and simply ignore the second line.
Why does my gradient look gray or muddy in the middle?
In the default sRGB blending, two colors from opposite sides of the color wheel, such as blue and orange, pass through gray halfway. Switch the blending to OKLCH, or add a third stop with a brighter color in the middle. The check above the editor warns you when this is likely.
Can I animate a CSS gradient?
Not by changing the gradient directly: browsers swap background images instead of blending between them. Two methods work: make the background larger than the element and animate background-position, or register the colors or angle as custom properties with @property and animate those. @property works in all major browsers since Firefox 128 in July 2024.
How do I put a gradient on text or a border?
For text, set the gradient as the background, then add background-clip: text, -webkit-background-clip: text and color: transparent. Keep a solid color for browsers or tools that do not support it. For a border, border-image works but ignores border-radius; for rounded corners, use two backgrounds, a solid one clipped to padding-box and the gradient clipped to border-box, with a transparent border.
How do I use the gradient in Tailwind CSS?
Open the Tailwind tab and copy the class. It uses an arbitrary value, bg-[...], with underscores in place of spaces, which works in Tailwind 3 and 4. Tailwind 4 also has its own bg-linear and bg-radial utilities with from, via and to colors if you prefer to compose gradients from your theme colors.
Is anything I make sent to your server?
No. The gradient is built in your browser and your last gradient is saved in your browser's local storage, so a reload keeps it; Reset clears it. A share link puts the settings after the # in the address, a part browsers do not send to the server. Like any website, our server keeps normal access logs of page visits, as described in our privacy policy.