CSS Gradient Generator
Build CSS linear and radial gradients with custom color stops, angles and presets, with 1-click CSS export. 100% free, no signup.
CSS
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
What CSS Gradient Generator Does
A CSS gradient is a generated image rather than 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 a color space in which the interpolation between those stops happens. That last part changed in the last few years, and most generators have not caught up with it.
Fading to transparent is the case most tutorials warn about. The CSS keyword `transparent` is defined as `rgba(0, 0, 0, 0)`, transparent black, and interpolating toward black while the alpha drops would pass through a muddy gray. The CSS Images specification avoids that by interpolating in premultiplied alpha, and current browsers follow it: measured in Chrome 153, a blue fading to `transparent` and the same blue fading to its own zero-alpha version render identical pixels. The generator still writes the zero-alpha form, which gives the same result and also stays blue in any renderer that does not premultiply.
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
How CSS Gradient Generator Works
How the CSS is written
sort the stops by position → each stop becomes "color position%" (a transparent stop becomes the same color at alpha 0) → linear-gradient(angle), radial-gradient(circle) or conic-gradient(from angle) → optional "in oklab" or "in oklch" before the geometry → optional text-clip lines
- stops
- Up to five, each with a color and a 0–100% position. They are sorted, so dragging one past another cannot produce invalid CSS.
- interpolation
- Default sRGB, or oklab or oklch. The color space is written at the start of the function, e.g. linear-gradient(in oklab 90deg, …).
- text mode
- Adds -webkit-background-clip: text, background-clip: text and color: transparent so the gradient fills the letters.
Worked example
Linear, 135°, stops #2b5876 at 0% and #4e4376 at 100%, interpolation oklab
- Stops sorted: #2b5876 0%, then #4e4376 100%
- Interpolation prefix: in oklab
- Geometry: 135deg
Result: background: linear-gradient(in oklab 135deg, #2b5876 0%, #4e4376 100%);
Fading to `transparent`: what the spec says happens
Premultiplied interpolation scales each color by its alpha before blending, so a color with zero alpha contributes nothing. Both lines below render the same in current browsers; the last row is what a renderer that skips premultiplication produces.
| Written as | What the midpoint becomes | Result |
|---|---|---|
| #3b82f6 → transparent | rgba(59, 130, 246, 0.5) | Stays blue while the alpha drops (premultiplied, per spec) |
| #3b82f6 → rgba(59, 130, 246, 0) | rgba(59, 130, 246, 0.5) | Identical result; this is the form the generator writes |
| #3b82f6 → transparent, without premultiplying | rgba(30, 65, 123, 0.5) | The dark gray band older renderers drew |
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, to 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?
Linear gradients transition colors smoothly along a straight directional angle (e.g. 90deg), while Radial gradients radiate outwards from a central point.
Are CSS gradients performant in modern browsers?
Yes, CSS gradients are hardware-accelerated by the GPU and are infinitely more lightweight than loading large background image files.
Can I combine multiple gradients on one element?
Yes. The CSS background-image property accepts a comma-separated list of gradients layered on top of each other, which is how complex multi-tone gradient effects are achieved.
Why does my gradient look banded instead of smooth?
Color banding usually comes from too few color stops across a wide hue range, or the display’s own limited color depth. Adding intermediate color stops is the standard fix.
What is the difference between linear, radial and conic gradients?
Linear runs along a straight axis, radial spreads outward from a point, and conic sweeps around one like a pie chart, which is why conic is what you use for pie charts and color wheels in pure CSS.
Why does my gradient look muddy in the middle?
Because interpolating between complementary colors in sRGB passes through gray. Adding an intermediate stop in a more saturated hue avoids it, and newer CSS color interpolation options can blend through a different color space entirely.
What causes visible banding?
Limited color depth across a wide, subtle gradient makes the steps visible as stripes. Adding a very slight noise overlay is the standard fix, and shorter or higher-contrast gradients band less.
How do I create a hard edge rather than a blend?
Place two color stops at the same position. The color changes instantly at that point, which is how stripes and multi-color flags are built with a single gradient.
Is a gradient an image in CSS?
Yes. Gradients are generated images, so they go in background-image rather than background-color, and they can be layered with other backgrounds and sized with background-size.
Is my CSS sent anywhere?
No. The gradient is composed in your browser and the code is generated locally.
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)
- 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