CSS Gradient Generator
Build linear, radial & conic gradients and copy the CSS
CSS Gradient Generator tool
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
CSS Gradient Generator: key facts
- What it does
- Build linear, radial & conic gradients and copy the CSS
- Category
- Generators
- Cost
- Free, with no account, sign-up, or install.
- Your data
- Runs entirely in your browser — the files and text you enter are never uploaded to a server.
- Last reviewed
- . Report an incorrect result.
What the CSS Gradient Generator does
Hand-writing a CSS gradient means remembering the exact syntax for stops, angles, and the three gradient functions — easy to fumble when you just want a good-looking background. This generator gives you the controls and writes the CSS for you, updating a full-bleed preview the instant you change anything.
It builds linear, radial, and conic gradients from a list of color stops you can add, recolor, and reposition with a per-stop slider. Linear and conic gradients expose an angle dial from 0 to 360 degrees; radial gradients let you choose a circle or ellipse shape. The result is plain CSS with no library or framework attached.
Front-end developers prototyping a hero section, designers testing a brand color blend, and anyone theming a dashboard reach for it to land a gradient quickly. When it looks right, one click copies the complete background declaration in a JetBrains Mono code block, ready to drop into a stylesheet.
Using the CSS Gradient Generator, step by step
- Pick a gradient type — Linear, Radial, or Conic — with the type buttons.
- Set the angle with the slider for linear and conic gradients, or pick circle vs ellipse for radial.
- Edit each color stop's color and drag its position slider; use "Add stop" for more colors or the trash icon to remove one (a minimum of two is kept).
- Watch the large preview panel update live as you tweak.
- Click "Copy CSS" to grab the full background declaration for your stylesheet.
Linear and radial, from colour stops
The generator builds a CSS gradient function from your colour stops and, for linear gradients, an angle. Stops can be positioned explicitly as percentages or left to distribute evenly, and the output is a rule you can paste directly into a stylesheet.
Angle in CSS is measured clockwise from pointing upward, which is worth internalising because it is not the mathematical convention. Zero degrees runs bottom to top, 90 degrees left to right, and 180 degrees top to bottom — so the common top-to-bottom gradient is 180deg, not 0.
Gradients are painted as background images rather than background colours, which is why they respond to the background and background-image properties and not to background-color.
- linear-gradient(90deg, ...) runs left to right.
- Two stops at the same position produce a hard edge rather than a blend, which is how stripes are made.
- A radial gradient blends outward from a centre point rather than along an axis.
What makes this one worth using
- It is pure React state with no dependencies — nothing is sent anywhere, and the CSS it emits is standard, framework-agnostic, and works in any project.
- All three gradient types share one interface, so you can flip a linear blend into a conic one without rebuilding your color stops.
- Unlimited color stops with individual position control let you craft multi-color blends, not just the two-color presets many tools cap you at.
- The output is the literal CSS the preview renders, so what you copy is exactly what you saw — no surprise differences in production.
The grey dead zone, and performance
Blending between two saturated complementary colours produces a desaturated band through the middle — the notorious grey dead zone — because interpolation in sRGB passes through low-saturation territory. The traditional fix is a third stop at the midpoint in a colour that keeps saturation up. Modern CSS offers a better one: interpolating in a perceptual space such as OKLCH avoids the problem structurally, and is now widely supported.
Two practical cautions. Text over a gradient is a contrast hazard, because the contrast ratio changes across the element — text legible at one end may fail at the other, so check against the worst point rather than the average. And gradients with many stops, or animated gradients, can be expensive to repaint; animating the background position of a large gradient is a common cause of jank, and transforms or opacity are cheaper to animate.
For subtle depth, a gradient between two closely-related tones of the same hue reads as texture rather than decoration and dates far better than a bold two-colour sweep. And remember gradients can be layered with transparency over an image, which is the standard way to darken a photograph enough for overlaid text.
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
A linear gradient blends colors along a straight line at a set angle. A radial gradient radiates outward from a center point as a circle or ellipse. A conic gradient sweeps colors around a center point like a color wheel, which is handy for pie-chart and angular effects.
How do color stop positions work?
Each stop has a position from 0% to 100% along the gradient. Two stops at 0% and 100% blend smoothly edge to edge; placing two stops at the same position creates a hard line instead of a fade. The slider next to each color sets that percentage.
Will the copied CSS work in every browser?
Linear and radial gradients are supported everywhere. Conic gradients are supported in all current browsers but not in very old ones, so add a solid background-color fallback if you must support legacy versions.
