🎨 CSS Gradient Generator
Create vibrant CSS linear and radial gradients with custom color stops, angles, designer presets, and 1-click CSS code export. 100% free.
CSS
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
What CSS Gradient Generator Does
A CSS gradient is a generated image, not a color, and almost everything that goes wrong with one follows from that. It has a direction, a set of color stops with positions, and — the part that changed in the last few years and that most generators have not caught up with — a color space in which the interpolation between those stops happens.
The single most common bug in hand-written gradients is fading to transparent. The CSS keyword `transparent` is defined as `rgba(0, 0, 0, 0)`: transparent BLACK. Fade a blue to it in sRGB and the midpoint passes through a muddy dark gray, because you are interpolating toward black while the alpha drops. The fix is to fade to the same color at zero alpha instead, and the generator writes it that way.
The second is interpolation space. sRGB interpolation runs through a desaturated middle on many color pairs — the classic blue-to-yellow gradient that turns gray in the center. Interpolating `in oklab` keeps the midpoint vivid because the space is perceptually uniform; `in oklch` travels around the hue wheel instead, which gives you rainbow-like transitions rather than a straight line through color space.
Beyond that this covers what the search actually asks for: linear, radial and conic, up to five stops with positions you control, and a text-gradient output, since applying a gradient to type is one of the most searched variants and needs `background-clip` rather than `color`.
How to Use CSS Gradient Generator
- Select Linear or Radial gradient mode
- Pick starting and ending colors using the interactive color pickers
- Adjust the gradient angle slider (0° to 360°)
- Copy the ready-to-use CSS background rule for your website
Why the `transparent` keyword ruins a fade
Both gradients start from the same blue. Only the second stays blue.
| Written as | What the midpoint becomes | Result |
|---|---|---|
| #3b82f6 → transparent | rgba(30, 65, 123, 0.5) | Fades through dark gray — the classic muddy edge |
| #3b82f6 → rgba(59, 130, 246, 0) | rgba(59, 130, 246, 0.5) | Stays the same hue while the alpha drops |
Choosing an interpolation space
| Syntax | Behavior | Use when |
|---|---|---|
| (default, sRGB) | Straight line through sRGB; can desaturate in the middle | Maximum browser support, or the colors are close together |
| in oklab | Perceptually uniform; keeps the midpoint vivid | Two distant colors where sRGB goes gray |
| in oklch | Travels around the hue wheel | Deliberately rainbow-like transitions |
How to Read Your Result
Ship a fallback before the modern syntax
A browser that does not understand `in oklab` discards the whole declaration, leaving no gradient at all rather than a worse one. Write a plain sRGB gradient first and let the modern one override it on the next line — the cascade handles the rest.
Gradients on text need background-clip
You cannot put a gradient in `color`. The pattern is to set the gradient as the background, clip it to the text with `background-clip: text`, and make the text itself transparent so the background shows through. Keep the `-webkit-` prefixed property alongside it; it is still required in practice.
Stop positions matter more than stop count
A gradient with two stops at 0% and 100% spends most of its length in the transition. Moving the stops inward — 20% and 80% — gives you solid color at each end and a faster change between, which usually reads as more deliberate than a slow wash.
Limitations & Accuracy Notes
- Linear, radial and conic only. Repeating gradients, multiple layered gradients and gradient borders are not generated here.
- The `in oklab` and `in oklch` syntax needs a recent browser; the page says so and the fallback advice above applies.
- Radial gradients are emitted as a centered circle. Ellipses, explicit sizing keywords and off-center positions are not exposed.
- The preview shows the gradient over a checkerboard so transparency is visible honestly, but your own background will differ.
- No color-blindness simulation, and gradients that rely on hue alone to convey meaning can be unreadable for some viewers.
Frequently Asked Questions
What is the difference between Linear and Radial gradients?
Are CSS gradients performant in modern browsers?
What is the difference between linear, radial and conic gradients?
Why does my gradient look muddy in the middle?
What causes visible banding?
How do I create a hard edge rather than a blend?
Is a gradient an image in CSS?
Is my CSS sent anywhere?
References & Further Reading
- MDN — linear-gradient() — Syntax, angle conventions and color stop positioning
- MDN — <color> transparent keyword — Confirms transparent is rgb(0 0 0 / 0) — the reason a naive fade goes gray
- CSS Images Module Level 4 — interpolation — The specification for gradients, including the color interpolation method
- MDN — background-clip — How a gradient is applied to text