CSS Gradient Generator
Build linear, radial and conic gradients with unlimited stops, live preview and copy-ready CSS, SCSS, Tailwind or SVG output.
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, expressed with the CSS linear-gradient(), radial-gradient() or conic-gradient() functions. Gradients scale infinitely without using image files, so they are ideal for hero sections, buttons, cards and page backgrounds.
Linear, radial and conic gradients
| Type | Description | Typical use |
|---|---|---|
| Linear | Transition along a straight line at a specific angle | Hero backgrounds, buttons |
| Radial | Transition radiating out from a center point | Spotlights, glows, avatars |
| Conic | Transition that sweeps around a center like a clock | Charts, color wheels, pie indicators |
Understanding the angle
In a linear gradient, the angle is measured in degrees clockwise from the top of the element. 0deg points up, 90deg points right, 180deg points down and 270deg points left. A 45° angle produces a diagonal sweep from the bottom-left corner to the top-right corner.
Common pitfalls
-
Gradient text needs
-webkit-background-clip: text;andcolor: transparent;to be visible. - Interpolating between very different hues in sRGB can produce a muddy mid-color. Use OKLCH interpolation in modern browsers when needed.
-
Alpha stops require
rgba(), not HEX — this generator handles it automatically.
Frequently asked questions
How many color stops can I have?
Omni Color supports up to 12 stops per gradient — enough for complex hero backgrounds. Two stops are the minimum.
Do gradients work in dark mode?
Yes. Gradients are just CSS backgrounds; you can override them under @media (prefers-color-scheme: dark) or a [data-theme="dark"] selector with a different gradient.
Are gradient exports accessible?
Gradients themselves are decorative. Text placed on a gradient must still pass WCAG contrast — test the lightest and darkest part of the gradient separately with our contrast checker.
Can I export a PNG?
Yes. You can copy the SVG output and rasterize it in any tool, or use the SVG as a background image. Native PNG export is available in the palette generator and shades generator.