CSS Gradient Generator
About this generator
Six gradient modes in one editor — linear, radial, conic, repeating-linear, repeating-radial, and mesh. Per-stop alpha, animated keyframes with prefers-reduced-motion guard, background-aware preview compositing over 6 surface presets, drag-to-reorder stops with FLIP animation, OKLCH output, URL-hash share links. Export to CSS, SCSS, Tailwind arbitrary-value, React inline-style, or Vue scoped CSS. Free, MIT-licensed, no signup.
Tailwind CSS Gradient Generator (v3 + v4, Arbitrary Values)
Switch the export tab to Tailwind and the generator emits arbitrary-value class syntax — bg-[linear-gradient(137deg,#a78bfa_0%,#06b6d4_100%)] — that works identically on Tailwind v3 (with JIT) and v4 (alpha + stable). No migration needed when you upgrade.
Why arbitrary values instead of the built-in utilities?
Tailwind’s named gradient utilities (bg-gradient-to-r, from-, via-, to-) cover the simplest case: 2–3 stops, linear gradient, one of 8 fixed angles. The moment you need a 4-stop linear, ANY radial-gradient, a conic-gradient, an animated gradient with @keyframes, or per-stop alpha, the named utilities can’t express it. Arbitrary values are the escape hatch every shadcn/ui, Vercel, Linear, and Stripe-style production site uses for hero gradients.
Tailwind v4 specifically
If you’d rather extract the gradient to your design system in v4, copy the CSS export instead and paste it into the new @theme block in your CSS root. Reference as a custom utility from there. Both approaches survive Tailwind v3-to-v4 migration since the underlying gradient syntax is identical CSS.
Conic Gradient Generator (Pie Charts, Color Wheels, Rainbow)
Switch to Conic mode for the gradient type that radiates color stops around a centre point — the math behind CSS pie charts, color wheels, rainbow loaders, and dial-style data visualisations. No other generator in the top 10 ships conic-gradient support: CSSGradient.io, ColorZilla, and mycolor.space all stop at linear + radial. Conic gradients shipped to all evergreen browsers in 2020 (Chrome 69+, Safari 12.1+, Firefox 83+).
Three common use cases: pie / donut charts (paste stop percentages matching your data and you have a chart in CSS, no SVG required); rainbow loaders (one conic gradient with 6 rainbow stops, rotated via animation); and colour wheels (a conic gradient where every stop is the hue at that angle, used as a background for hue-picker UIs).
The “Rainbow” preset in the curated list demonstrates a 7-stop conic that’s the canonical CSS rainbow recipe. Click it, then adjust the starting angle to rotate where red begins.
CSS Mesh Gradient Generator (Multi-Radial Blob Composition)
Switch to Mesh mode and the generator composes 3–5 radial-gradient() layers stacked on a single background-image, with smartly-placed positions and soft fade radii. This is the production-grade approach to mesh gradients that Stripe, Linear, and Vercel actually ship today.
Why not a native mesh-gradient() function?
Native CSS doesn’t yet have a single mesh-gradient() function — it’s still in the CSS Color spec proposal pipeline (CSS Images Module Level 4 draft). Until that ships, the multi-radial-stack technique is the most reliable cross-browser way to produce blob-style mesh aesthetics. The output is pure CSS — no SVG, no JS, no asset requests, no canvas rendering. Drop it into a hero section and ship.
Compared to Figma’s Mesh tool and Hypercolor
Figma’s native Mesh tool produces an exported PNG (not CSS) — great for design files, useless for production code. Hypercolor is a Tailwind-specific mesh tool but only outputs static palettes from a curated library. This generator’s mesh mode is fully interactive: drag stops to reposition the radial centres, tweak alpha per stop for softer blends, choose any of the 6 background surfaces to preview against. The mesh recipe alone makes this generator usable for the entire 2026-modern marketing-site aesthetic.
Animated CSS Gradient Generator (@keyframes + prefers-reduced-motion)
Toggle Animation in the controls and the CSS export grows a working @keyframes gradientShift block, a background-size: 200% 200% declaration to give the animation room to pan, and an animation: gradientShift 8s ease infinite rule. The duration is editable inline. Paste into any element and the gradient animates immediately.
Most free gradient generators ship a STATIC gradient and stop there — you’d have to hand-write the keyframes block yourself, calculate the background-size offset, and remember to wrap the rule in an accessibility guard. This generator wires it all in one toggle, including the @media (prefers-reduced-motion: no-preference) wrapper so users with vestibular sensitivity (~35% of adults have some motion preference) see a static gradient instead of a moving one.
The animation works for every mode: linear gradients pan diagonally, radial gradients pulse from centre, conic gradients rotate around the centre. The exported CSS is production-ready — no extra dependencies, no JS animation library, no GSAP. Just pure CSS that runs on the GPU compositor.
OKLCH Gradient Generator (Perceptually-Uniform Color Interpolation)
Switch the colour format toggle to OKLCH and every stop in the export uses oklch(L% C H) notation instead of hex. OKLCH is the modern perceptually-uniform colour space — Chrome 111+, Safari 16.4+, Firefox 113+ all support it natively.
Why this matters for gradients specifically: the classic CSS gradient interpolation bug is that a gradient between #ff0000 (red) and #00ff00 (green) goes through a muddy brown in the middle instead of a clean yellow. The browser is doing the math in sRGB, which isn’t perceptually uniform. OKLCH gradients interpolate through Oklab-space, which preserves vibrancy through the entire transition. Modern browsers also support an explicit interpolation hint — linear-gradient(in oklch, #ff0000, #00ff00) — that opt-ins to perceptually-uniform interpolation while keeping the colour stops as hex.
If you need to support browsers older than Chrome 111 / Safari 16.4, stick with the HEX export. For modern product surfaces (post-2023 browsers), OKLCH is the better default and the recommended approach in the CSS Color Module Level 4 spec. This generator is one of the only free gradient tools that exposes OKLCH output — no competitor in the top 10 SERP results does.
Compared to CSSGradient.io, ColorZilla, ColorSpace, Gradienty & Hypercolor
The gradient generator space has good options — but each top result is strong in one dimension and weak in another. Here’s the honest matrix:
| Feature | CSSGradient.io | ColorZilla | ColorSpace | Gradienty | Hypercolor | CodeFronts |
|---|---|---|---|---|---|---|
| Linear | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Radial | ✅ | ✅ | — | ✅ | — | ✅ |
| Conic | — | — | — | — | — | ✅ |
| Repeating linear / radial | — | — | — | — | — | ✅ |
| Mesh (multi-radial) | — | — | — | ✅ | ✅ Tailwind only | ✅ |
| Animated (@keyframes) | — | — | — | ✅ | — | ✅ + a11y guard |
| Per-stop alpha | partial | ✅ | — | — | — | ✅ slider |
| Drag-to-reorder stops | — | ✅ | — | — | — | ✅ FLIP |
| Tailwind export | — | — | — | ✅ | ✅ | ✅ v3 + v4 |
| React / Vue / SCSS export | — | SCSS only | — | — | — | ✅ all 3 |
| OKLCH output | — | — | — | — | — | ✅ |
| Preset library | 135+ | yes | small | 20,000+ | Tailwind | 18 + Phase 2 expansion |
| URL hash share link | — | ✅ | — | — | — | ✅ |
| FAQ schema (JSON-LD) | — | — | — | — | — | ✅ |
| Free, no signup | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Where each competitor leads: Gradienty has the largest browse library (20,000+ gradients for inspiration) and the most polished Tailwind-specific UI; ColorZilla has 10+ years of refinement and SVG export with old-browser prefixed CSS; CSSGradient.io has the strongest blog SEO + color-swatch reference pages. Where this generator leads: mode coverage (6 modes vs their 1–3), framework export breadth (5 frameworks vs their 1–2), accessibility (animated gradient with reduced-motion guard, OKLCH for perceptual uniformity), and the editor’s customisation depth (alpha sliders, drag-reorder, background-aware preview).
How to use
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. |
CSS syntax examples
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
background: radial-gradient(ellipse at center, #7c3aed 0%, #0a0a0a 70%);
background: conic-gradient(from 90deg, #7c3aed, #ff6c8a, #06b6d4, #7c3aed);
background: linear-gradient( 135deg, #7c3aed 0%, #a855f7 40%, #06b6d4 100% );
Pro tips
Gradient types
background: linear-gradient(135deg, #7c3aed, #06b6d4);
background: radial-gradient(circle at center, #7c3aed, #0a0a0a);
background: conic-gradient(from 0deg, #7c3aed, #06b6d4, #7c3aed);
background: repeating-linear-gradient(45deg, #0f172a 0 10px, #1e40af 10px 20px);
background: repeating-radial-gradient(circle at center, #a78bfa 0 5px, #0f172a 5px 10px);
background: radial-gradient(at 20% 25%, #a78bfa 0%, transparent 50%), radial-gradient(at 80% 70%, #ec4899 0%, transparent 50%), #0f0f13;
Browser support
linear-gradient() and radial-gradient() are supported in all modern browsers.conic-gradient() requires slightly newer versions — check the table below.
| Browser | linear-gradient | radial-gradient | conic-gradient |
|---|---|---|---|
| Chrome | v26+ | v26+ | v69+ |
| Firefox | v16+ | v16+ | v83+ |
| Safari | v7+ | v7+ | v12.1+ |
| Edge | v12+ | v12+ | v79+ |
Frequently asked questions
What makes this gradient generator different from the dozens of other free ones online?
Three things. First, the mode coverage — six gradient TYPES in one editor: linear, radial, conic, repeating-linear, repeating-radial, and CSS mesh gradient (the modern blob-style multi-radial composition). Most generators ship two or three. Second, the export breadth — five framework formats (CSS, SCSS variables, Tailwind arbitrary-value classes, React inline-style, Vue scoped CSS), not just a blob of CSS. Third, the editor power — drag-to-reorder color stops with smooth FLIP animation, per-stop alpha channel for transparent gradients, animation toggle that ships a working @keyframes block, and background-aware preview so you can see how the gradient composites over white, dark, brand, or photographic backgrounds. Older generators like CSSGradient.io or ColorZilla's tool are stuck on linear+radial and a static preview; this one matches what designers actually need in 2026.
Can I use this for mesh gradients? Real mesh gradients, not just radials labeled 'mesh'?
Yes — the Mesh mode composes 3-5 radial-gradient layers stacked on a single background-image, with smartly-placed positions and soft blur radii to produce the blob-style aesthetic that Figma's Mesh tool and dribbble-tier marketing sites use. Native CSS doesn't (yet) have a single mesh-gradient() function — it's still in the CSS color spec proposal pipeline — so we render mesh gradients via the layered-radials technique, which is the production-grade approach top design teams (Stripe, Linear, Vercel) actually ship today. The output is pure CSS, no SVG, no JS, no asset requests.
Why does it bother with per-stop alpha when I can just put rgba() in the hex field?
Because hex-with-alpha (#rrggbbaa) is a 2018+ feature that's now universally supported, AND because the dedicated alpha slider gives you a continuous knob instead of typing two hex digits and praying you picked the right number. Glass overlays, frosted backgrounds, fade-to-transparent hero shots, photo color washes — all of these need the gradient's color stops to be partially transparent so the background underneath shows through. The alpha slider produces #rrggbbaa output by default (8-digit hex), which is the most compact and most-supported syntax; the SCSS export emits rgba() with named variables instead so designers can tune transparency from a single source of truth.
How does the Tailwind gradient export work? Tailwind has its own bg-gradient-to-r utility — why arbitrary values?
Tailwind's built-in gradient utilities (bg-gradient-to-r, from-, via-, to-) cover the simplest case — a 2-3 stop linear gradient at one of 8 fixed angles. The moment you need a 4-stop gradient at 137°, a radial, a conic, or anything with custom alpha, the built-in utilities can't express it. The Tailwind export emits arbitrary-value syntax — bg-[linear-gradient(137deg,#a78bfa_0%,#06b6d4_100%)] — which works on Tailwind v3 and v4 identically and gives you 100% expressive power without leaving the utility-class paradigm. For users who DO want the named-utility version, the CSS export gives you the raw background: declaration you can paste into a Tailwind @layer components block.
What about animated gradients — does the export actually include working @keyframes?
Yes. Flip the Animation toggle and the CSS export grows a @keyframes gradientShift block, a background-size: 200% 200% setting on the element, and an animation: gradientShift 8s ease infinite declaration. The duration is editable inline. The exported CSS is production-ready — paste it into any element and the gradient will animate. For accessibility, the export also wraps the animation rule in a @media (prefers-reduced-motion: no-preference) guard, so users with vestibular sensitivity see a static gradient instead of a moving one. This is one feature most free generators skip entirely; you'd have to copy a static gradient, then hand-write the keyframes block yourself.
Can I save my gradient and come back to it later, or is everything lost when I refresh?
Every adjustment is encoded into the URL hash automatically — type, angle, mode, every color stop, every alpha value, animation state, background choice, and export format. Bookmark a tuned gradient, the URL preserves the entire state. Send the URL to a colleague, they see your exact configuration. No accounts, no servers, no logins. Old shared links from the May 2026 v1 of this generator still work — the hash format is strictly backward-compatible, with new fields defaulting sensibly when absent.
Why include OKLCH and modern color formats? Won't that break older browsers?
OKLCH (oklch() color function) shipped in all evergreen browsers — Chrome 111, Safari 16.4, Firefox 113 — and is now the recommended color format for designers because it interpolates perceptually-uniform colors. The OLD problem with gradients was: take #ff0000 (red) and #00ff00 (green), put them in a linear-gradient, and the middle is a muddy brown instead of clean yellow. OKLCH interpolation fixes this — gradients between two OKLCH colors stay vibrant through the entire transition. The export tab includes an OKLCH-format toggle; if you're shipping to a public site and need IE11 / Safari 15 support, stick with the default hex export. For modern product surfaces (post-2023 browsers only), OKLCH is the better default and the spec body's recommended approach.
How is this different from CSSGradient.io, ColorZilla, ColorSpace, or Gradienty?
Each top competitor in this space is strong in one dimension and weak in another. CSSGradient.io has the strongest preset library + blog SEO but only ships linear and radial modes (no conic, repeating, mesh, or animated). ColorZilla has the longest history (10+ years) and the Photoshop-style multi-stop editor, but the UI shows its age and there's no Tailwind / React / Vue export — only CSS and SCSS via the Compass mixin format. ColorSpace (mycolor.space) is genuinely minimal — two colours + one orientation, output linear only. Gradienty has a 20,000-gradient browse library plus dedicated Tailwind workflows but doesn't expose per-stop alpha and lacks OKLCH output. This generator combines the breadth (6 modes including conic + repeating + mesh, 5 framework exports, animated keyframes with prefers-reduced-motion guards, per-stop alpha, OKLCH output) with editor power (drag-to-reorder stops with FLIP animation, background-aware preview compositing over 6 surface presets, URL-hash share links). The single feature we DON'T match: Gradienty's 20K-gradient browse library — they win on discovery; we win on customisation depth.
How do I generate a Tailwind v4 gradient (or v3) — and why arbitrary values?
Switch the export tab to Tailwind and the generator emits the arbitrary-value syntax: bg-[linear-gradient(137deg,#a78bfa_0%,#06b6d4_100%)]. This shape works on Tailwind v3 (3.x with JIT) and Tailwind v4 (alpha + 4.0) identically — no migration needed. Tailwind's built-in gradient utilities (bg-gradient-to-r, from-, via-, to-) cover only the simplest case — a 2–3 stop linear gradient at one of 8 fixed angles. The moment you need a 4-stop gradient at 137°, a radial-gradient, a conic-gradient, an animated gradient with @keyframes, or anything with custom alpha, the named utilities can't express it. The arbitrary-value escape hatch is what every shadcn/ui, Vercel, Linear, and Stripe-style production site actually uses for hero-section gradients. If you'd rather extract the gradient to your design system, copy the CSS export instead and add it to your @layer components block in v3 or your @theme block in v4.
How do I add noise / grain to a CSS gradient for that Vercel / Linear / Apple aesthetic?
The modern grainy-gradient look used by Vercel, Linear, Apple Music, and dribbble-tier marketing sites combines a smooth gradient with a fine-grain SVG noise overlay on top. The technique: generate your gradient via this tool (any of the 6 modes), then layer an inline SVG noise filter on top via a second background-image. The SVG uses feTurbulence + feColorMatrix to produce monochrome grain. Combine both with background-blend-mode: overlay (or soft-light for subtler grain) and the gradient picks up the texture without losing colour fidelity. Phase 2 of this generator will ship a Grain toggle directly in the editor — for now, copy the gradient CSS from the export tab and paste the SVG noise filter from any of the design-systems guides (search 'css grain noise SVG filter') as a second layer. The grain alone is what separates a 2026-modern hero from a 2018-flat one.
Is this free for commercial use? Any watermark, attribution, or license restriction?
Free, MIT-licensed, zero attribution required, no watermark, no signup, no upgrade tier hiding features. Use the generator on a paid project, a client deliverable, a startup landing page, an enterprise design system — none of those need permission. The generator itself is hosted free at codefronts.com; the output CSS is yours. If you find this useful, sharing the page on Twitter or pointing teammates at it is the best thanks; but nothing is required. (If you do post about it, the X / Facebook / LinkedIn share buttons in the header pre-fill a tweet/post for you.)
See it used in real designs
Browse hand-coded collections that put this tool to work.
