CSS Gradient Generator
Pick a gradient type, drag the color stops, and copy the finished CSS — the preview updates instantly as you design.
Maximum of 8 color stops
What a CSS gradient actually is
A CSS gradient is not an image file — it's a function the browser evaluates on the fly to paint a smooth (or hard-edged) transition between two or more colors, assigned through background-image. Because it's computed, not downloaded, it scales to any element size with zero extra network requests, stays crisp on any screen density, and can be edited by changing a few numbers instead of re-exporting a PNG. This generator builds the three gradient functions CSS supports — linear-gradient(), radial-gradient() and conic-gradient() — from a visual list of color stops so you never have to memorize the syntax.
linear-gradient() — bands along an angle
linear-gradient(90deg, #a21caf 0%, #fb923c 100%) draws a straight line at 90 degrees and paints every point along it according to how far it sits between the color stops. The angle follows compass-style CSS convention: 0deg points up, 90deg points right, 180deg points down and 270deg points left — increasing clockwise. Percent positions describe where along that line each color reaches "full strength"; between two stops the browser interpolates smoothly.
radial-gradient() — color spreading from a point
radial-gradient(circle, #a21caf 0%, #fb923c 100%) spreads color outward from a center point instead of along a line. Choosing circle forces a perfectly round gradient regardless of the element's aspect ratio; ellipse (the CSS default) stretches the gradient to match the element's width and height, which is usually what you want for wide banners or hero sections. Radial gradients are the standard choice for spotlight, glow and vignette effects.
conic-gradient() — color sweeping around a point
conic-gradient(from 0deg, #a21caf 0%, #fb923c 100%) behaves like a clock hand sweeping around a center point, painting color based on the angle rather than the distance. This is the only one of the three that can produce a genuine color wheel or pie-chart look, and it's also the easiest way to build a checkerboard or pinwheel pattern by repeating hard color stops around the circle.
Color stops and positions
Every gradient type takes the same ingredient: an ordered list of colors, each optionally pinned to a position from 0% to 100%. If you don't specify a position, CSS spaces the colors evenly; this tool always writes explicit percentages so the result looks identical everywhere it's pasted. Two things are worth remembering: stops render in the order the browser lists them (this tool sorts by position automatically, regardless of the order you added them in), and giving two stops the same position creates an instant, hard-edged color change instead of a soft blend — the standard technique for CSS-only stripes.
Example 1 — a soft two-color banner. Purple (#a21caf) at 0% fading to orange (#fb923c) at 100%, 90deg linear, gives background-image: linear-gradient(90deg, #a21caf 0%, #fb923c 100%); — a clean left-to-right wash, good for hero banners and call-to-action buttons.
Example 2 — a three-stop sunset. Adding a middle stop, say #f97316 at 55%, between the same purple and orange gives the transition a warmer midpoint instead of a flat linear blend — small position tweaks like this are how most "designer" gradients get their character.
Example 3 — hard stripes with conic-gradient(). Repeating two colors at the same position pairs — e.g. white 0%–25%, purple 25%–50%, white 50%–75%, purple 75%–100% — around a conic gradient produces four crisp pie slices instead of a smooth fade, because each pair shares a position.
Fallbacks and browser support
All three gradient functions have been supported in every major browser (Chrome, Firefox, Safari, Edge) since 2021 or earlier, so compatibility is rarely a real concern today — the one exception is that very old Safari versions need a -webkit- prefix, which most build tools add automatically via autoprefixer. Because background-image silently renders nothing if it can't be parsed, this generator always writes a plain background-color line using your first stop's color right above it, so the element still shows a sensible flat color the instant it appears — before the gradient (or any other background image) finishes loading.
| Function | Direction model | Best for |
|---|---|---|
| linear-gradient() | Single angle, straight bands | Banners, buttons, backgrounds |
| radial-gradient() | Outward from a center point | Spotlights, glows, vignettes |
| conic-gradient() | Rotating around a center point | Color wheels, pie charts, pinwheels |
Common mistakes
- Forgetting the fallback color. If a stylesheet fails to load or a very old browser can't parse the gradient syntax, an element with only
background-imageset can end up transparent. Always keep the pairedbackground-colorline this tool generates. - Assuming radial gradients are always circles. The CSS default shape is
ellipse, which stretches to the element's box — pickcircleexplicitly whenever you need a perfectly round gradient on a non-square element. - Confusing gradient angle with rotation.
90deginlinear-gradient()means "toward the right," not "rotated 90° from some default" — it follows the same clockwise-from-north convention as a compass bearing, not standard math angles. - Overloading a gradient with too many stops. Beyond four or five colors, most gradients start to look muddy rather than more sophisticated; fewer, well-placed stops usually read as more polished design.
Sources & further reading
Frequently asked questions
How do I create a CSS gradient with this generator?
Choose linear, radial or conic at the top, then add or edit color stops below — each stop has a color swatch and a position slider from 0% to 100%. Drag the angle slider (for linear and conic) or pick a shape (for radial), and the preview plus the generated CSS update instantly. For example, a two-stop 90deg linear gradient from purple (#a21caf) at 0% to orange (#fb923c) at 100% produces background-image: linear-gradient(90deg, #a21caf 0%, #fb923c 100%); — press Copy CSS to grab that line plus a matching background-color fallback.
What's the difference between linear, radial and conic gradients?
A linear-gradient() paints straight color bands along a single angle you choose, like 90deg for left-to-right or 135deg for a diagonal. A radial-gradient() spreads color outward from a center point in a circle or ellipse, which suits spotlight or vignette effects. A conic-gradient() sweeps color around a center point like a color wheel or pie chart, starting from the angle you set. All three accept the same list of color stops — only the direction the colors travel differs.
How many color stops can a gradient have, and what happens at the edges?
This tool supports 2 to 8 color stops, enough for the vast majority of real gradients while keeping the editor simple — CSS itself allows more, but extra stops rarely add visual value and make the control list unwieldy. Each stop's position can be set anywhere from 0% to 100%, and stops don't have to be added in order — the generated CSS always lists them by position so the gradient renders correctly. If two stops share the same position, you get a hard color edge instead of a smooth blend, which is a common trick for stripes.
Why does the generated CSS include a background-color as well as background-image?
background-image: linear-gradient(...) (or radial-/conic-gradient()) is what actually paints the gradient, but it does nothing if a browser can't parse it or while a heavy page is still loading. Setting background-color to your first color stop gives a sensible flat-color fallback that shows immediately and matches the gradient's overall tone, so the layout never looks broken or transparent.
Is my gradient design sent to a server?
No. Every color, position, angle and preview in this CSS gradient generator is computed and rendered locally in your browser with plain JavaScript and CSS — nothing is uploaded, logged or shared. Your last design is saved only in your own browser's local storage so the tool reopens where you left off, and no account or sign-up is required.