Build linear, radial and conic CSS gradients visually — angle or center position, two or three stops with positions — and copy the background-image declaration.
Settings
Generated locally in your browser — your settings and results never leave this page.
All three gradient functions, one tool
CSS has three gradient painters and each has a job: linear for directional washes, radial for spotlights and vignettes, conic for sweeps, pies and color wheels. Pick the type, set angle or center, place two or three stops with position sliders, and copy the background-image declaration that matches the preview exactly.
Worked example
.hero {
background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}
.spotlight {
background-image: radial-gradient(circle at 30% 30%, #fef3c7 0%, #b45309 100%);
}Techniques the presets demonstrate
- Hard splits: two stops at the same position (50%/50%) produce a crisp line — the basis of split layouts and flags.
- Conic sweeps: matching first and last colors makes the wheel seamless.
- Off-center radials: moving the center to a corner reads as directional light.
Limitations and notes
- background-image does not animate — crossfade two layers or animate background-position for motion.
- Browser support is universal for all three types (conic since 2020).
- Text over gradients needs contrast checking at the LIGHTEST point — the contrast checker takes that color.
- Tailwind project? The Tailwind Gradient Generator emits the class form.
How to use the CSS Gradient Generator
- Pick the type — linear, radial or conic — and set the angle or center.
- Choose two or three colors and slide their stop positions.
- Copy the background-image declaration.
Frequently asked questions
Linear, radial or conic — when does each fit?
Linear for directional washes (heroes, buttons), radial for spotlights and vignettes, conic for pie-chart sweeps and color wheels. All three are fully supported in modern browsers, conic since 2020.
How do I get a hard line instead of a blend?
Give two stops the same position — the "Hard split" preset does 50%/50%, producing a crisp two-tone background, the trick behind striped and split layouts.
Can I animate a gradient?
Not directly — background-image does not interpolate. The standard workarounds: animate background-position over an oversized gradient, or crossfade two layered elements.
Style a card component
The border, radius, shadow and background for a component, as CSS you can paste.
- CSS Border GeneratorSet the border.
- CSS Border Radius GeneratorRound the corners, including uneven radii.
- CSS Box Shadow GeneratorAdd elevation with a shadow.
- CSS Gradient Generator you are hereFill the background with a gradient if you want one.
