Preview
background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%);
Build linear and radial CSS gradients visually — pick colors, set the angle, add stops, and copy clean, ready-to-use CSS. Free, no signup, runs in your browser.
background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%);
The CSS Gradient Generator lets you design linear and radial gradients visually and copy the exact CSS. You pick the colors, set the angle (for linear) or shape (for radial), add as many color stops as you like, and watch the preview update live. When it looks right, one click copies clean, ready-to-paste CSS.
It replaces the slow trial-and-error of hand-writing gradient syntax and re-checking it in the browser. Everything runs client-side, so there's nothing to install and nothing you enter is sent anywhere — the generated code is yours to drop straight into a stylesheet.
Choose linear or radial
Linear blends along a straight line; radial blends outward from a center point.
Set the angle or shape
Drag the angle slider for linear, or pick circle or ellipse for radial.
Add and position color stops
Add colors, slide each stop's position, and remove any you don't need.
Copy the CSS
Click Copy and paste the generated background rule into your stylesheet.
A linear gradient transitions colors along a straight line whose direction you set with an angle — 90° runs left to right, 180° runs top to bottom. It's the right choice for backgrounds, buttons, and banners where you want a smooth directional blend.
A radial gradient transitions outward from a center point, either as a circle or an ellipse. It's useful for spotlight effects, soft glows, and drawing attention to the middle of an element. Both accept multiple color stops, and a stop's position (0–100%) controls where each color sits along the blend.
Live Preview
See the gradient update instantly as you change colors and angles.
Linear & Radial
Switch between directional and outward gradients in one click.
Unlimited Stops
Add, position, and remove as many color stops as you need.
Clean CSS Output
Copy tidy, ready-to-paste CSS with one click.
100% Private
Runs entirely in your browser — nothing is uploaded or stored.
Fast & Free
No downloads or sign-ups, on any device with a browser.