CSS Gradient Generator
Design a gradient by dragging color stops, pick how the colors blend, and copy clean CSS — or export it as SVG or PNG.
- Linear · radial · conic
- OKLab blending
- CSS + Tailwind
- SVG + PNG
How the colors between two stops are calculated. OKLab avoids the dull gray band that sRGB produces between opposite colors.
Color stops
Export
SVG has no conic gradients. Use the PNG export for a conic gradient.
Presets
How to make a CSS gradient
Everything updates live.
- 1
Set the colors
Click the bar to add a stop, drag stops to move them and edit each color below. Or start from a preset.
- 2
Shape it
Choose linear, radial or conic, the angle or center, and the blending method.
- 3
Copy or export
Copy the CSS or Tailwind code, or download the gradient as SVG or as a PNG of any size.
Gradients without the muddy middle
Modern color blending, compatible output.
Three gradient types
Linear with any angle, radial as circle or ellipse, and conic for pie-style sweeps — each with its position controls.
Perceptual blending
Blend in OKLab or OKLCH and the gray, dull band that sRGB puts between opposite colors disappears.
Direct editing
Add stops with a click, drag them, nudge with the arrow keys, delete with a double click. Colors may be partly transparent.
CSS for every browser
Use the short modern syntax, or switch on maximum support to get the same look written as extra stops, plus a solid-color fallback.
Vector and bitmap
SVG for crisp scaling in design tools, PNG up to 8000 px for slides, wallpapers and e-mail.
Presets and random
Eighteen starting points and a randomizer that produces harmonious pairs and triples.
Shareable link
Copy a link that opens the tool with the same content. The data sits in the part of the address after #, which browsers do not send to servers.
Private by design
Everything runs in your browser. What you type or open is not sent to a server.
CSS gradients explained
A CSS gradient is an image the browser generates, so it costs no download and stays sharp at any size. linear-gradient() blends along a line: 0deg points up, 90deg to the right, and angles grow clockwise. radial-gradient() spreads from a center point outward as a circle or ellipse, and conic-gradient() sweeps around the center like a clock hand — the basis of pie charts and color wheels.
Each color stop has a color and a position. Between two stops the browser interpolates — traditionally in sRGB, channel by channel. That works for neighboring hues, but between opposite colors such as blue and yellow the midpoint turns gray. Modern CSS lets you choose the space: linear-gradient(in oklab, blue, yellow) blends the way the eye expects, and in oklch travels around the hue circle for vivid, rainbow-like transitions.
The in oklab syntax is supported by all current browsers (Chrome 111, Safari 16.2, Firefox 127 and later). For older ones, this generator can write the identical look as a classic gradient with additional intermediate stops. Two more practical points: put a plain background-color before the gradient as a fallback, and add a slight angle or a third stop to avoid visible banding on large, low-contrast areas.
The three gradient functions
| Function | Blends | Typical use |
|---|---|---|
| linear-gradient() | Along a straight line at an angle | Backgrounds, buttons, overlays, text fills |
| radial-gradient() | From a center point outward | Spotlights, glows, vignettes |
| conic-gradient() | Around a center point | Pie charts, color wheels, loaders |
| repeating-…() | The same, tiled | Stripes and patterns |
Tips
- Find the exact colors for your stops with the Color Converter.
- Take a ready-made color set from the Palette Collection or create one in the Palette Generator.
- Text on a gradient must be readable on its lightest and darkest part — test both with the Contrast Checker.
- For a fade to transparent, use the same color with zero alpha (for example rgb(6 182 212 / 0)) rather than the keyword “transparent”, which older browsers blend through gray.
Frequently asked questions
Can’t find your answer? Contact us — we reply quickly.
How do I create a gradient in CSS?
Use a gradient function as a background image: background: linear-gradient(135deg, #06b6d4, #6366f1);. This generator writes the code for you, including angle, stops and fallback.
Why does my gradient look gray in the middle?
Because the colors are mixed in sRGB, where opposite hues cancel out. Choose OKLab blending — or add a stop with a vivid color in between — and the gray band disappears.
What is the difference between linear, radial and conic?
Linear changes color along a line, radial from the center outward, conic around the center like the hands of a clock.
Does “in oklab” work in all browsers?
In all current versions of Chrome, Edge, Safari and Firefox. For older browsers switch on “Maximum browser support”: the same visual result is written with classic syntax.
Can I use the gradient as an image?
Yes. Export it as SVG, which stays sharp at any size, or as PNG with the pixel dimensions you need. Conic gradients are available as PNG only, because SVG has no conic gradient.
Is my data sent to a server?
No. The tool runs entirely in your browser. Your input is not uploaded, logged or stored on our servers.
More free developer tools
Encode, format, test, convert and generate — small tools that run in your browser and keep your data on your device.