Gradient Generator
Build linear, radial, and conic CSS gradients with multi-stop color control
How to Gradient Generator Online
Build linear, radial, or conic CSS gradients with multi-stop color control.
- Pick a gradient type: linear (straight transition), radial (outward from center), or conic (rotation around center).
- For linear and conic, adjust the angle slider — 0° points up, then rotates clockwise.
- Click any color swatch to open a picker, or type a HEX value directly into the text field.
- Drag the position slider next to each color stop to control where the transition happens.
- Click 'Add color stop' to add intermediate colors for multi-stop gradients.
- Remove any stop with the trash icon. The first and second stops are anchors and cannot be removed below 2.
- Copy the generated CSS at the bottom and paste it into your stylesheet.
About Gradient Generator
Gradients are one of the few CSS primitives that consistently look better than the images they replace. A web designer reaching for a gradient image in 2010 had to round-trip through Photoshop, Slice It Up, export PNG, optimize, upload. The same designer in 2026 types `linear-gradient(135deg, #3b82f6, #a855f7)` and ships. The cost-per-gradient went from minutes to seconds, the result scales perfectly to any DPI, and a hot-reload editor lets you tune the colors live without leaving the browser. This tool is the editor.
The three gradient functions cover most of what designers need:
- **`linear-gradient(angle, stops…)`** is the workhorse. Backgrounds, button highlights, hero overlays, and section dividers are virtually always linear. The angle convention is "0deg points to the top, then rotates clockwise" — so 90deg is left-to-right, 180deg is top-to-bottom, 270deg is right-to-left. Common values: 135deg (the iconic diagonal you see on hero banners), 180deg (vertical fade often used for image overlays). - **`radial-gradient(shape at position, stops…)`** transitions outward from a point. This tool fixes the shape to `circle at center` for predictability, which covers 90% of real use cases (orbs, vignettes, spotlight effects). For more control — ellipses, off-center origins, sized radii — write the CSS by hand. - **`conic-gradient(from angle at position, stops…)`** sweeps around a center point. Originally added to CSS for pie charts and color wheels, conic gradients turn out to be useful for loading spinners, percentage indicators, and any "around-a-point" effect. The `from` angle sets where 0% begins on the sweep.
The **color stops** are where the design lives. A stop is a color paired with a position (`#3b82f6 0%` puts blue at the start of the gradient). Two stops produce a smooth transition between two colors. Three or more stops let you build multi-color gradients — common patterns include the "instagram" four-color sweep, the "sunset" three-color (warm-to-cool), and the "diagonal stripes" two-stop-pair pattern where pairs of stops sit at the same position to create hard breaks.
One useful technique: **hard stops** for solid-color blocks. `linear-gradient(to right, red 50%, blue 50%)` produces a hard 50/50 vertical split with no transition. This is how CSS-only progress bars, two-color section dividers, and striped backgrounds are built — no images needed. To get this in the tool, set two color stops to the same position value.
A subtle gotcha: **stops outside 0–100% are valid but invisible.** CSS lets you write `red 120%` (color is at position 1.2× the gradient length) which puts it off the visible area. This is sometimes useful for animation (sliding a hidden color in) but more often a bug — if your gradient looks "cut off" or "missing a color," check that all stops are within 0–100%. The tool clamps the position sliders to that range to prevent the issue.
Modern browsers all support all three gradient functions well. The compatibility floor is around 2018 (when Edge moved to Chromium and Safari shipped conic gradients). Tailwind users can wrap the value in arbitrary-value syntax: `class="bg-[linear-gradient(135deg,#3b82f6,#a855f7)]"`. For frequently-reused gradients, extract them into a custom property: `--brand-gradient: linear-gradient(...);` at the root, then `background: var(--brand-gradient);` everywhere.
Everything runs in your browser. The preview is a rendered `<div>` with the exact `background:` string that gets copied to your clipboard, so what you see is what your users will get. No image rendering, no server-side compilation, no network requests during interaction.
Related Tools
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
**Linear** gradients transition in a straight line, controlled by an angle (0° = bottom-to-top, 90° = left-to-right, 180° = top-to-bottom, 270° = right-to-left). Most page backgrounds and button highlights use linear. **Radial** gradients transition outward from a center point, producing a soft circular wash — useful for spotlights, vignettes, and orbs. **Conic** gradients sweep around a center point like a clock hand, producing pie-chart looks, color wheels, and certain loading spinner effects. All three are first-class CSS values supported in every modern browser.
Why do my color stops snap into the wrong order?
Stops are always rendered in numeric position order — `red 80%, blue 20%` is treated identically to `blue 20%, red 80%`. The tool sorts stops internally before emitting CSS so the output is always valid. If your gradient looks wrong, the issue is usually that two stops are too close together (creating a sharp band) or too far apart (washing out one color). Drag the position sliders to redistribute.
What does 0% and 100% actually mean?
For linear gradients, 0% is where the first color begins and 100% is where the last color ends, measured along the gradient line set by the angle. For radial gradients, 0% is the center and 100% is the farthest edge. For conic gradients, 0% is the start of the sweep at the chosen start angle and 100% is one full rotation back to the start. Stops outside 0–100% are valid in CSS but rarely useful — they hide colors off-edge.
Why does the conic gradient look striped instead of smooth?
Because conic gradients sweep around the center, when your stops span only a narrow angular range (e.g., red at 0%, blue at 5%, then nothing else) you get sharp transitions instead of smooth blending. Spread the stops across the full 0–100% range, or add intermediate stops, for a smooth sweep. Conic gradients with just two stops at 0% and 100% produce a single smooth color wheel.
How do I make a 'hard stop' / two-color block?
Put two stops with the same position value, different colors. `red 50%, blue 50%` produces a hard 50/50 split with no transition. This is how CSS-only striped backgrounds, progress bars, and two-color split designs are built. The tool lets you build this by sliding two stops to the same position.
What is the difference between 'background' and 'background-image'?
Gradients are technically image values, so `background: linear-gradient(...);` and `background-image: linear-gradient(...);` are equivalent for setting just the gradient. The shorthand `background` resets other background properties (color, position, repeat) — use `background-image` if you want to preserve those. The tool emits `background:` for compactness; rewrite to `background-image:` if you have other background properties set.
Is anything sent to a server?
No. The gradient is rendered natively by your browser using the same CSS string copied to your clipboard. No network requests.