Free online CSS gradient generator. Supports linear, radial, and conic gradients with visual color stops, angle control, and live preview. Copy CSS instantly.
TL;DR: Free CSS gradient generator for linear, radial, and conic gradients—angle slider, stop positions and opacity, presets, live preview, and copyable background CSS.
For local tools, open DevTools → Network and search your input — it should not appear in requests.
Next steps
Usage Guide
linear, radial, and conic syntax is verbose; one wrong stop or angle breaks everything. Tune visually (presets, angle slider, 2–6 stops with opacity), preview live, and copy the background declaration — generated locally.
1. Build a gradient
Opacity below 100% exports as rgba stops; stops are sorted by position so out-of-order dragging still yields valid CSS. Multiple stops approximate mesh; keep a solid fallback for older browsers.
- Pick linear / radial / conic; drag 0°–360° for linear and conic.
- Edit each stop’s color, position %, and opacity; add/remove (2–6).
- Copy the full background rule from the preview pane.
2. Presets and UI use
- Presets cover blue–purple, orange–red, blue–cyan, dark, radial spotlight, and conic sweep.
- Hero fills, button hovers, card borders; pair with flexbox/grid for layout + fill.
- Minify with css-minifier when embed size matters.
3. Accessibility
Run color-contrast-checker; measure the lightest point under the text, not the average.
- Check text contrast on top of gradients; use translucent stops as scrims if needed.
- Do not rely on color alone for state — add icons or copy.
4. Linear angles in the color-space era
The angle in a linear-gradient is a physical direction, not a color position: 135deg runs top-left to bottom-right. What changed recently is interpolation — interpolating in sRGB produces muddy midpoints on vivid hue pairs, while the newer color-mix and oklch interpolation keeps saturation through the transition. For product UIs, prefer subtle two-stop gradients (5-8% lightness delta) with matching hue; the dramatic multi-stop rainbow belongs in hero art. The preview tool exists precisely because gradient math resists eyeballing: a stop position of 65% rarely looks like 65%.
5. Conic sweeps and transparent ends
conic-gradient stops still map 0%–100% around the center; the from angle sets the starting heading—useful for sweep highlights and segmented rings. Fade out with the same hue at opacity 0; avoid the transparent keyword (rgba(0,0,0,0)), which muddies mid-fades. The tool exports standard syntax without redundant -webkit- wrappers—enough for modern browsers; leave prefixes to autoprefixer for legacy targets.
FAQ
Nothing to pay and no paid tier. Editing stops, the live preview, and code generation all take place in your own browser — no account, no subscription.
Linear, radial, and conic. Linear and conic expose a 0°–360° angle control; each stop has position % and opacity (below 100% exports as rgba). You can add or remove stops (2–6) and load palette presets.
Yes. One click copies the full background declaration in standard syntax (no redundant -webkit- wrappers), ready for your stylesheet. The preview updates live. For very old browsers, add prefixes in your build with autoprefixer.
Stops packed too tightly cause banding — spread their positions out. Transparent stops blend with whatever sits behind them, so the look changes when the background changes, and print colors differ from screen colors. Paste the CSS into your project and check it against both dark and light backgrounds before committing.
Do not convey critical states through color alone, and verify text contrast with a dedicated contrast checker — the preview here only covers the gradient itself.
Related Tools
Related Articles
Online CSS Gradient Generator: Create Beautiful Background Gradients
Build linear, radial, and conic CSS gradients visually—custom angle, stop positions, opacity, and one-click copy of the background rule—plus syntax, palettes, and accessibility notes.
Online Color Palette Generator: Scales, Harmonies, and CSS Export
Generate tint/shade scales or wheel harmonies (complementary, analogous, triadic, split-complementary, tetradic) from one base color. Copy CSS variables or a Tailwind snippet, then check contrast before shipping.
px, rem, em: What Each CSS Unit Actually Answers, and How to Convert Without Surprises
The boundary between px, rem, and em (root-relative vs parent-relative), the px-to-rem formula and size table, the 62.5% trick's hidden costs, the Safari media-query rem trap, and browser minimum font size — with an online converter.