CSS Gradient Generator
Compose a gradient visually — linear, radial, or conic, with as many color stops as you need, each with its own position — and copy the exact background-image declaration. The preview is rendered from the same CSS string you copy.
Gradient settings
Color stops
CSS
background-image: linear-gradient(90deg, #1e88e5 0%, #7b1fa2 100%);
Stops are emitted sorted by position, so the copied CSS is always valid no matter what order you edited them in.
Use this gradient in a Moda design
Gradients look best on something — apply yours to social graphics, slides, and site headers.
Try Moda free →Linear, radial, or conic?
Linear gradients sweep in one direction and are the workhorse for backgrounds, buttons, and overlays — the angle control sets the direction, with 0° pointing up and 90° pointing right, per the CSS spec. Radial gradients bloom outward from the center (circle or ellipse) and suit spotlights, vignettes, and soft glows. Conic gradients rotate around the center like a color wheel or pie chart — they are the only way to build pie-style charts and angular color sweeps in pure CSS, and the from angle sets where the sweep starts.
How color stops actually behave
Each stop pins a color at a percentage along the gradient line; the browser interpolates between adjacent stops. Two stops at the same position create a hard edge instead of a blend — useful for stripes and split backgrounds. CSS requires stop positions to be non-decreasing (a stop earlier than its predecessor gets clamped by the browser), so this tool always emits stops sorted by position: drag them in any order and the copied code stays valid.
Gradient banding and how to avoid it
Long, subtle gradients between similar colors can show visible bands, because 8-bit color has only 256 levels per channel. Practical mitigations: shorten the distance the gradient covers, choose endpoint colors that differ in more than one channel, or add a midpoint stop to reshape the ramp. Browsers currently interpolate gradients in sRGB by default; the newer `in oklch` interpolation syntax produces smoother perceptual blends but is worth verifying against your browser-support targets before shipping.
Frequently asked questions
Why does the copied CSS reorder my stops?
CSS treats a stop positioned before its predecessor as clamped to the predecessor’s position, which silently changes the gradient. Emitting the stops sorted by position produces the same visual you previewed while keeping the code unambiguous.
How do I make a hard line instead of a smooth blend?
Place two stops at the same position with different colors — for example a red stop at 50% and a blue stop at 50% makes a sharp red/blue split. Add more same-position pairs for stripes.
What does the angle mean, and why is there none for radial?
For linear gradients, 0deg points to the top and angles increase clockwise, so 90deg runs left to right. Conic gradients use the angle as the starting direction of the rotation. Radial gradients radiate from a center point equally in all directions, so an angle has no effect — you choose the shape (circle or ellipse) instead.
Can I use the output as a text or border gradient?
Yes — the generated value works anywhere a gradient image is accepted. For text, combine it with background-clip: text and a transparent text color; for borders, use it as a border-image or on a wrapper element. The tool emits it as background-image because that is the most common target.