Create CSS gradients visually. Linear, radial and conic — 18 presets.
Linear gradient — linear gradient with a configurable direction angle.
Radial gradient — radial gradient from center to edges.
Conic gradient — conic gradient (color rotation around center).
Up to 5 color stops can be added. For each stop, color and position (0-100%) are specified.
Use presets for a quick start or the Random button to generate a random gradient.
It explains, debugs and writes — AI chat, first generation free.
Open AI chat →CSS Gradient Generator — Linear, Radial, Conic
Visual CSS gradient editor supporting three types (linear, radial, conic), 18 ready presets, random generation, and instant CSS code copying. Create gradients for backgrounds, buttons, icons, and any UI elements.
CSS Gradient Types
| Type | CSS function | Description |
|---|---|---|
| Linear | linear-gradient() | Transition along a straight line at a given angle |
| Radial | radial-gradient() | Transition from center outward in circle or ellipse |
| Conic | conic-gradient() | Transition along an angle (like a pie slice). Great for pie charts |
CSS Gradient Syntax
Linear: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Radial: radial-gradient(circle at center, #f093fb 0%, #f5576c 100%)
Conic: conic-gradient(from 0deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b)
Color Stops
A color stop is a color and its position (%) along the gradient. Multiple stops are possible: linear-gradient(90deg, red 0%, orange 50%, blue 100%). If no position is given, stops are distributed evenly.
Frequently Asked Questions
Do browsers support conic-gradient?
Yes, all modern browsers. Chrome 69+, Firefox 83+, Safari 12.1+. IE is not supported.
Can multiple gradients be layered?
Yes: background: linear-gradient(...), radial-gradient(...); — gradients layer on top of each other.
For shadows use CSS Shadow, for border radius — CSS Border Radius, for colors — Color Picker.
Useful articles
WCAG Color Contrast: Website Accessibility Guide
A complete guide to color contrast: WCAG 2.1 standards, AA and AAA levels, calculation formula, practical examples of good and bad contrast, and how to fix accessibility issues.
CSS Border Radius: Rounding Element Corners
How to use border-radius: syntax, shorthand notation, elliptical corners. Online border-radius generator.