Most CSS gradient generators give you two modes (linear, radial), a static preview, and a copy button. You build a quick gradient, copy the CSS, find out later it looks wrong on a dark background, and have to start over. This generator was rebuilt to handle the full spectrum of modern gradient work in one editor — six mode types, alpha-aware color stops, animation, framework exports, and a background-aware preview that shows your gradient over the surface it will actually live on.
Six gradient modes in one place — linear, radial, conic, repeating-linear, repeating-radial, and mesh. The first three cover 95% of gradient needs; the two repeating variants produce striped patterns, barber poles, and bullseye visuals; and mesh mode composes 3-5 radial layers to produce the modern blob-style backgrounds Figma and Stripe popularized. Switch modes with one click; your color stops carry across so you don’t lose work mid-experiment.
Three more differences worth calling out. Per-stop alpha — every color stop has a dedicated transparency slider, output as compact 8-digit hex by default (rgba() in SCSS export). Animated gradients — toggle Animation and the export grows a working @keyframes block with a prefers-reduced-motion guard already wired in. Framework export — copy plain CSS, SCSS variables, Tailwind arbitrary-value classes, React inline-style, or Vue scoped CSS. The Tailwind output uses square-bracket arbitrary values so it works on v3 and v4 identically without trying to guess your design tokens.
Permalink: every adjustment encodes into the URL hash, so you can bookmark a tuned gradient or send it to a teammate. No login, no watermark, no paywall. Free and MIT-licensed.
?
How to use
01
Choose a gradient mode
Six modes — linear (directional), radial (circular burst), conic (pie-chart sweep), repeating-linear / repeating-radial (tiled patterns), and mesh (multi-radial blob composition). The mode picker is the top-left of the controls rail.
02
Set your color stops
Click any swatch to open the picker. The Position slider moves a stop along the track; the Alpha slider sets transparency (gets emitted as 8-digit hex / rgba / oklch with alpha based on your output format).
03
Reorder via drag handle
Grab the ⋮⋮ handle on any stop and drag to reorder. Colors carry along the gradient track — you see the gradient redraw as the drop indicator moves between rows.
04
Add stops or distribute
"+ Add stop" inserts a new midway color; "⇔ Even space" auto-distributes existing stops evenly along the track — useful when you've added 4-5 colors and want them perfectly spaced.
05
Adjust angle / radial
Linear and conic modes show an Angle slider (0-360°). Radial modes show shape (ellipse / circle) and origin (center, corners, edges). Mesh ignores both — its layout is composed automatically.
06
Toggle animation
Flip Animate gradient and the export grows a working @keyframes block + background-size: 200% 200% + animation declaration, wrapped in a prefers-reduced-motion guard. Duration is editable from 1-30 seconds.
07
Pick a surface to preview
The preview canvas can be set to White, Dark, Black, Brand purple, or a photo-mesh surface so you can see how your gradient — especially one with alpha — composites over the real surface it will ship on.
08
Pick a format & export
Tabs across the export pane: CSS, SCSS (with extracted variables), Tailwind (arbitrary-value classes), React (inline-style object), Vue (scoped CSS). One click to copy.
A
Syntax parameters
Parameter
Applies to
Description
angle
linear, conic
Direction of the gradient — e.g. 135deg, to right, to bottom left. The Angle slider (0-360°) controls this.
shape
radial
ellipse (default) or circle. Picked via the Shape toggle in the Radial options section.
position
radial
Center point — e.g. at center, at top right. Picked via the Origin dropdown (9 named positions).
color stop
all
A color followed by an optional position — e.g. #7c3aed 0%, #06b6d4 100%. The generator emits the format you pick in the Output color space section: hex (with rrggbbaa for alpha), rgb/rgba, hsl/hsla, or oklch (modern).
alpha
all
Each stop has its own Alpha slider (0-100%) — independent of the hex color. Output uses 8-digit hex (#rrggbbaa) by default, or rgba/hsla/oklch with explicit alpha when the corresponding format is picked. Unlocks glass overlays, fade-to-transparent, tints over photography.
animation
all
Toggle "Animate gradient" to ship the export with a working @keyframes gradientShift block + background-size: 200% 200% + animation declaration, wrapped in a prefers-reduced-motion guard. Duration is editable from 1-30s.
repeating-*
linear, radial
Pick "Rep. Linear" or "Rep. Radial" in the Mode row to tile the gradient outward. The stops' final position % defines one band of the repeat — set it low (e.g. 20%) for tight stripes, high (e.g. 80%) for wide bands.
mesh (CSS hack)
mesh
CSS doesn't (yet) ship a native mesh-gradient() function — the Mesh mode composes 3-5 radial-gradient layers stacked on a single background-image, at distributed positions. The output is pure CSS, no SVG.
Apply a gradient to text by setting it on the element's background, then `-webkit-background-clip: text` + `color: transparent`. Three-line headline hero treatment, no SVG required. See our dedicated <a href="/collections/css-gradient-text/">CSS Gradient Text</a> collection for tested patterns.
02
Animate via the built-in toggle
Flip Animate gradient in the controls — the export grows a working @keyframes block with `background-size: 200% 200%` + a `prefers-reduced-motion` guard, ready to paste. No more hand-writing keyframes blocks every time you want a moving background.
03
Fix the "gray zone" with OKLCH
Gradients between complementary colors (red ↔ green, blue ↔ orange) pass through muddy gray in sRGB. Switch the Output color space to OKLCH and the same two stops interpolate through vibrant intermediates instead — perceptually-uniform color space, designed for this exact problem. Chrome 111+, Safari 16.4+, Firefox 113+.
04
Use transparent for cross-browser fades
Browsers interpolate `rgba(0,0,0,0)` differently from `transparent` in some legacy versions. Prefer `transparent` for the fully-clear stop; use `rgba(yourColor, 0)` (with the SAME color as the other stop) if you need to fade INTO a specific tone without grayish interpolation. The generator's Alpha slider produces clean fades automatically.
05
Re-theme via a single CSS custom property
Lift the color stops into `--grad-from` and `--grad-to` on `:root`. Dark mode, brand recolors, and seasonal swaps become a one-line override instead of editing 12 different background rules. The SCSS export does this for you — each stop becomes a `$gradient-stop-N` variable.
06
Mesh for hero / marketing backgrounds
The Mesh mode composes 3-5 radial-gradient layers — exactly the technique Stripe, Linear, and Vercel use for their hero backgrounds. Pure CSS, no SVG, no image assets, no DPI banding. Pair with a subtle `filter: blur(40px)` if you want the softer Figma-style mesh look.
≋
Gradient types
linear-gradient()
Transitions colors along a straight line at any angle.
background: repeating-radial-gradient(circle at center, #a78bfa 0 5px, #0f172a 5px 10px);
mesh (multi-radial)
CSS doesn't (yet) ship a mesh-gradient() function — the Mesh mode composes 3-5 radial-gradient layers to produce the blob-style aesthetic Figma and Stripe popularized.
linear-gradient() and radial-gradient() are supported in all modern browsers.
conic-gradient() requires slightly newer versions — check the table below.