CSS Gradient Generator: Linear, Radial and Conic
Build a CSS gradient, adjust its stops, and copy the generated code. Compare the preview with the background where you plan to use it.
CSS Gradient Generator workspace
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
Build a CSS gradient, adjust its stops, and copy the generated code. Compare the preview with the background where you plan to use it. Gradient colors vary across the painted area, so one contrast check is not enough for text placed over the whole surface. Test the generated CSS in its actual dimensions and check foreground contrast across the regions behind important content.
How to use the CSS gradient generator
- 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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Why does my gradient run the wrong way at a given angle?
In linear-gradient, 0deg points to the top and degrees increase clockwise — so 90deg blends toward the right and 180deg toward the bottom, which is also the default when no angle is set. Old tutorials written for legacy prefixed syntax often describe this backwards.
How many color stops can I place?
Between two and eight. Each stop takes a color plus a 0–100% position; two stops at 0% and 100% give a plain blend, while hard-stop pairs (same percentage twice) produce crisp stripes instead of a fade.
Do I still need -webkit- or -moz- prefixes for gradients?
No. Unprefixed linear, radial, and conic gradients have worked in every major browser since around 2017, so strip prefixes from old snippets. The generator's 'with fallback' output instead adds a solid background-color line for renderers that cannot paint gradients at all.
Are my gradient colors uploaded while designing?
No. Stops and angles are processed locally in your browser, and Toolk's page analytics do not receive your colors. The preview repaints instantly with nothing sent anywhere.
How do I make sure text stays readable over my gradient?
Sample the lightest stop and test it in the Color Contrast Checker at /tools/color-contrast-checker — text must clear 4.5:1 against every stop it crosses, not just the midpoint, so darken both ends or add a scrim layer when ratios fall short.