🎨CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually — add color stops, preview live, copy the code.
CSS Gradient Generator — build any gradient and copy the code
Our free css gradient generator makes it easy to create linear, radial, and conic gradients without wrestling with CSS syntax. Pick your gradient type, add as many color stops as you need, drag them into position, and watch the live preview update instantly. When the gradient looks right, the ready-to-paste CSS background line is waiting with a single-click copy.
Each color stop supports full alpha transparency, so you can fade colors in and out or blend to a fully transparent edge. For linear gradients, choose a custom angle (0–360°) or pick a directional keyword like to right or to bottom right. Radial gradients let you set the shape (circle or ellipse) and center position. Conic gradients add a sweep angle and a center point. Start from a built-in preset or hit Random to generate something unexpected and customize from there.
Everything runs locally in your browser — no sign-up, no uploads, no limits. The generated CSS is valid and ready to drop straight into your stylesheet.
About the CSS Gradient Generator
Features
Three gradient types
Linear, radial, and conic — each with dedicated controls for angle, shape, and position.
Unlimited color stops
Add as many stops as you need. Position each one from 0–100% and blend them freely.
Alpha transparency
Each stop has an alpha channel (0–1). Set it below 1 and the CSS output switches to rgba() automatically.
Add Midpoint
Inserts a blended stop at the midpoint of the largest gap — a quick way to add smooth color transitions.
Live preview
The gradient preview and CSS output update instantly as you change any value.
Presets and random
Start from a ready-made preset or generate a random gradient and customise from there.
Copy-ready CSS
One click copies the full background line — paste straight into your stylesheet, no editing needed.
Fully client-side
Nothing is sent to a server. All processing happens in your browser — fast, private, and works offline.
Frequently Asked Questions
How does the CSS gradient generator work?
Pick a gradient type (linear, radial, or conic), add and position your color stops, then adjust the direction or angle. A live preview updates instantly and the matching CSS background line is ready to copy.
Is it free?
Completely free — no sign-up, no downloads, and no limits.
What gradient types are supported?
Linear, radial, and conic gradients. Linear blends along a straight line at a chosen angle. Radial blends outward from a center point. Conic sweeps around a center like a color wheel.
Can I use more than two colors?
Yes — add as many color stops as you like with the Add Stop button. Each stop has its own color, alpha, and position. Use Add Midpoint to automatically insert a blended stop between the widest gap.
Can I control transparency?
Yes. Each color stop has an alpha field (0–1). Set alpha below 1 to make that stop semi-transparent, or 0 to fade to fully transparent. The generated CSS uses rgba() for stops with alpha below 1.
What CSS does it output?
It outputs the full background CSS line, such as background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); — ready to paste directly into your stylesheet.
What is the difference between linear, radial, and conic?
Linear gradients blend along a straight line in a given direction. Radial gradients spread outward from a center point in an ellipse or circle shape. Conic gradients rotate the color stops around a center point, like a color wheel or pie chart.
Are there presets?
Yes — click any swatch in the Presets row to load a ready-made gradient, or click Random to generate one with random colors and type. Customise from there.
Is my data sent anywhere?
No. Everything runs locally in your browser — nothing is sent to a server or stored.
Does it work on mobile?
Yes — the tool is fully responsive. Controls, the live preview, and the CSS output all fit the screen on phones and tablets without overflow.