CSS Gradient Generator
Updated Free mock REST & WebSocket APIs
Drag color stops, spin the angle wheel and watch the preview update live. Copy production-ready CSS with a solid-color fallback — or a Tailwind class.
background: #a856de; background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
bg-[linear-gradient(135deg,#6366f1_0%,#a855f7_50%,#ec4899_100%)]
🔒 Everything runs in your browser. Try OKLCH blending for brighter, less muddy midpoints.
How to make a CSS gradient
- Start from a preset or keep the default, then choose Linear, Radial or Conic.
- Click the stop bar to add a color stop; drag a stop to move it (or focus it and use the arrow keys); press Delete to remove it. Click a stop's swatch to change its color and opacity.
- Set the direction with the angle wheel. For radial and conic gradients, drag on the preview to move the centre.
- Try OKLCH blending for brighter midpoints, then copy the CSS or the Tailwind class.
Gradient syntax cheat sheet
| Type | Example | Notes |
|---|---|---|
| Linear | linear-gradient(135deg, #6366f1, #ec4899) | 0deg points up, 90deg to the right; or use to right, to bottom left |
| Radial | radial-gradient(circle at 30% 20%, #fef3c7, #7c2d12) | circle or ellipse; size keywords like closest-side |
| Conic | conic-gradient(from 0deg at 50% 50%, red, blue, red) | Sweeps around a point — pie charts and color wheels |
| Repeating | repeating-linear-gradient(45deg, #111 0 10px, #fbbf24 0 20px) | Stripes: two stops at the same position make a hard edge |
| Color space | linear-gradient(90deg in oklch, …) | Blends perceptually — avoids the gray “dead zone” between complementary colors |
Why the CSS includes fallbacks
The first line is a solid average color, so text stays readable if the gradient can't render (for example in some email clients). When you pick OKLCH or OKLab blending, the plain sRGB gradient comes second and the in oklch version last: browsers that don't understand color-space interpolation ignore the last declaration and keep the one before. Vendor prefixes like -webkit-linear-gradient haven't been needed since 2013.
Tips for better gradients
- Neighbouring hues (blue → violet) look smoother than opposites (blue → orange), which pass through gray in sRGB. Use OKLCH blending or add a middle stop.
- Banding on large areas? Add more stops or a subtle noise texture on top.
- Put text on a gradient? Check the contrast against both ends with the contrast checker.
Related tools
Embed this tool on your site
Browse all embeddable tools →Free for blogs, HR, payroll and contractor sites: copy one snippet — the widget sizes itself and matches your colors.
Get the embed code
Frequently asked questions
Is it free and private?
Yes. It's free with no sign-up, and it runs entirely in your browser — the colors you enter are never uploaded or logged.
How do I use the gradient in Tailwind CSS?
Copy the Tailwind class — it's an arbitrary value like bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)], where underscores stand for spaces. Simple two- or three-stop linear gradients can also use bg-linear-135 from-indigo-500 to-pink-500 in Tailwind v4.
Can I add transparency to a gradient?
Yes. Click a stop's swatch and lower its opacity — the CSS uses rgba() for that stop. Fading to transparent works best when you fade to the same color at 0% opacity.
Can I animate a CSS gradient?
Gradients can't be transitioned directly. Animate background-position on an oversized gradient, or register custom properties with @property and animate those.
What does the angle mean?
For linear gradients the angle is the direction the gradient runs: 0deg bottom to top, 90deg left to right, 180deg top to bottom. For conic gradients it's where the sweep starts.
Your business here? Sponsor this tool from $16/week. See placements