CSS Gradient Generator

Pick a gradient type, add two to five color stops, and drag each stop's position slider while the preview updates live. Linear gradients get an angle control; conic gradients get a starting angle.

The output is a single copy-ready background-image declaration — no vendor prefixes needed in any current browser.

Common uses

• Build a hero-section background without hand-tuning stop percentages
• Recreate a design mockup's gradient in CSS
• Experiment with conic gradients for pie-chart-style effects

Example

Linear · 90° · #2563eb at 0%, #9333ea at 100%

background-image: linear-gradient(90deg, #2563eb 0%, #9333ea 100%);

What's the difference between linear, radial, and conic gradients?

A linear gradient blends colors along a straight line at an angle you choose; a radial gradient radiates outward from the center in a circle; a conic gradient sweeps colors around the center like a color wheel, which is how pure-CSS pie charts are made.

Do CSS gradients still need vendor prefixes like -webkit-?

No. Unprefixed linear-gradient() and radial-gradient() have worked in every major browser since around 2013, and conic-gradient() since 2020, so the single declaration this tool outputs is all you need.

How do color stop percentages work?

Each percentage fixes where a color sits along the gradient line — 0% is the start, 100% the end — and the browser interpolates smoothly between neighboring stops. Pushing two stops close together creates a sharp transition instead of a soft blend.

Is my gradient built locally or on a server?

Locally. The live preview and the CSS code are generated in your browser as you drag the controls; no colors or settings are transmitted anywhere.

Why does my gradient show visible bands instead of a smooth blend?

Banding appears when a gradient stretches a small color difference across a large area, so the discrete steps of 8-bit color become visible. Using colors that differ more, shortening the gradient, or overlaying subtle noise reduces the effect.