Frequently Asked Questions
Everything you need to know about the CSS Gradient Generator.
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.