CSS Gradient Generator — Linear, Radial & Conic
Build a linear, radial, or conic CSS gradient with a live preview and 2–8 draggable color stops, then copy spec-compliant CSS, a Tailwind v4 arbitrary value, or an SCSS variable. Free, and 100% in your browser.
Color Stops (2)
Presets
Three Gradient Modes
Linear, radial, and conic — every CSS Images Module Level 4 type supported, with the correct keyword grammar for each (angle, shape-at-position, from-angle-at-position).
Up to 8 Color Stops
Add, drag, recolor, and remove stops (2 to 8). Each carries a precise 0–100% position and any hex color, and stops auto-sort by position before the CSS is built. Preview updates as you type.
Multi-Format Output
Copy raw CSS, full background declaration (with solid-color fallback for older renderers), Tailwind v4 arbitrary value, or SCSS variable. One click each.
100% Client-Side
Everything renders in the browser. Your brand colors, hero backgrounds, and unreleased visual identity stay local — no upload, no save.
CSS Gradient Generator: linear, radial & conic with one-click export
A CSS gradient generator turns a visual color blend into the exact CSS that paints it. Pick linear, radial, or conic, set an angle, shape, or position, place 2–8 color stops, and copy the result as spec-compliant CSS, a Tailwind v4 arbitrary value, or an SCSS variable. It runs 100% in your browser, free, with no upload.
How to make a CSS gradient
- Pick a Type: Linear for a straight blend, Radial for a circle or ellipse, or Conic for a swept wheel.
- Set direction — the Angle slider (0–360°) for linear and conic, or the Shape and Position dropdowns for radial.
- Edit color stops: use the native color picker or type a hex, drag each stop's 0–100% slider, and press Add Stop for up to eight (minimum two).
- Choose an Output format — CSS value, CSS declaration, With fallback, Tailwind v4, or SCSS variable — then click Copy.
- Or click a preset (Toolk Brand, Sunset, Ocean Depth, Aurora, Peach Bloom, Conic Wheel) to load a tested starting point and tweak from there.
How CSS gradients work
A CSS gradient is a generated image, not a color. It paints via background (or background-image), renders on the GPU at zero file size, and scales to any element with no pixelation. The grammar follows the W3C / MDN CSS Images Module Level 4: linear-gradient(angle, stops), radial-gradient(shape at position, stops), and conic-gradient(from angle at position, stops). This tool builds those strings directly and prints the stops in color N% form.
Angles are the part people get wrong. In linear-gradient, 0deg points to the top and the angle increases clockwise: 90deg = to right, 180deg = to bottom, 270deg = to left. CSS's default with no angle is to bottom (180deg). Vendor prefixes (-webkit-, -moz-) have been unnecessary since 2017 — strip them from any old snippet.
Worked examples: settings → CSS
Linear · 135° · two stops
background: linear-gradient(135deg, #006fe6 0%, #1e7e34 100%);
Radial · circle at top left
background: radial-gradient(circle at top left, #ffd194 0%, #d1913c 100%);
Conic wheel · five stops
background: conic-gradient(from 0deg at center, #ff0080 0%, #ff8c00 25%, #40e0d0 50%, #9b59b6 75%, #ff0080 100%);
Edge case · hard stop (same position)
Give two stops the same percentage and the blend becomes a sharp line: linear-gradient(90deg, #3498db 50%, #e74c3c 50%) renders a clean two-color split, not a gradient. That is the basis for flag stripes, split backgrounds, and segmented progress bars — set both stops to 50% in the tool above.
Linear angle reference
Linear angles start at the top and rotate clockwise. Use this to translate a direction keyword into the deg value the Angle slider expects.
| Angle | Keyword equivalent | Color flows |
|---|---|---|
| 0deg | to top | Bottom → top |
| 90deg | to right | Left → right |
| 180deg | to bottom (default) | Top → bottom |
| 270deg | to left | Right → left |
| 135deg | to bottom right | Top-left → bottom-right |
The three CSS gradient modes compared
| Mode | Color Path | Best For | Browser Support |
|---|---|---|---|
| Linear | Straight line at an angle | Hero backgrounds, button fills, banner overlays | Universal (since 2013) |
| Radial | Circle or ellipse outward from a point | Spotlight effects, soft vignettes, glowing CTAs | Universal (since 2013) |
| Conic | Around a center point (clock-hand sweep) | Color wheels, pie-chart visuals, modern abstract heroes | Chromium 69+, Safari 12.1+, Firefox 83+ |
The fallback line most generators skip
Linear and radial gradients are universal, but a conic gradient on a browser older than Chromium 69 / Safari 12.1 / Firefox 83 is ignored entirely — the element renders blank, not degraded. The With fallback output handles this by printing two lines: a solid background using your first stop's color, then the gradient background below it. An unsupported browser keeps the solid; a modern one overrides it with the gradient.
One detail unique to this tool: stops are sorted by position before serialization, so dragging stop 3 to 0% and stop 1 to 100% still produces valid, in-order CSS. The Tailwind v4 format also replaces every space with an underscore (for example bg-[linear-gradient(135deg,_#006fe6_0%,_#1e7e34_100%)]) because Tailwind requires that inside bracket notation — paste it verbatim and it works.
Runs 100% in your browser
Your colors never leave your device. The picker, stop math, CSS serialization, and live preview run locally in JavaScript, and Copy uses your browser's native clipboard — no uploads, nothing leaves your device. I tested all three types across the full angle range, with 2, 5, and the maximum 8 stops, same-position hard stops, and every output format. The preview stays instant as you drag.
Frequently asked questions
Is this CSS gradient generator free?
Yes — 100% free with no signup and no usage cap. The CSS you generate is yours to use in any personal or commercial project without attribution.
Does it run in my browser, or is my gradient uploaded?
Nothing is uploaded. The picker, stop math, and serialization all run in your browser, so the tool keeps working offline once the page has loaded.
What angle gives a left-to-right gradient?
Set the Angle slider to 90°. In linear-gradient, 0deg is to top and angles increase clockwise, so 90deg flows left to right and 270deg flows right to left.
How do I keep text over a gradient accessible?
Test your text against the lowest-contrast region of the gradient, not the middle, in the Color Contrast Checker, and never carry meaning by color alone.
Related CSS & color utilities
Add depth alongside your gradient
CSS Filter GeneratorBlur, brightness & hue on top
Clip Path GeneratorCrop the gradient to any shape
Border Radius GeneratorRound the gradient container
Color ConverterHEX ↔ RGB ↔ HSL for stops
Color Palette GeneratorSource harmonious color stops
Color Contrast CheckerValidate text over a gradient
CSS BeautifierFormat the rule you paste in
CSS MinifierShip the gradient token to prod
CSS Specificity CalculatorDebug an overridden background
Flexbox GeneratorLay out the gradient cards
CSS Grid GeneratorBuild the surrounding layout
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.