CSS Gradient Generator
Build linear, radial, and conic gradients visually, then copy the ready-to-use CSS for a background or gradient text.
.gradient-bg {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}Gradient gallery
33 presets — click any gradient to apply it.
Why use a gradient generator?
Getting a gradient to look right — the right angle, the right color stops, smooth enough transitions — usually means a lot of trial and error directly in CSS. Building it visually first lets you see the result immediately and copy out clean, correct syntax once it looks right, instead of guessing at degrees and hex codes blind.
Gradient types at a glance
- Linear — the most common type, ideal for hero backgrounds, buttons, and cards.
- Radial — expands from a center point, good for spotlight or vignette effects.
- Conic — sweeps around a center point, useful for wheels, progress rings, and dial-style UI.
Frequently asked questions
Does this generate real, usable CSS?
Yes — the output is plain, standards-based CSS (linear-gradient, radial-gradient, or conic-gradient) with no framework dependency. Copy it straight into a stylesheet or inline style.
What's the difference between linear, radial, and conic?
Linear transitions colors in a straight line at a chosen angle. Radial expands outward from a center point in a circle. Conic sweeps colors around a center point, like a color wheel — useful for pie-chart-style effects.
How do I make gradient text instead of a gradient background?
Switch the CSS output toggle to "Text gradient" — it generates the background-clip: text pattern (with color: transparent) needed to apply a gradient to text itself, and the preview updates to show it live.
Can I use more than two colors?
Yes — add up to 6 color stops, each with its own position (0-100%), for smoother or more complex multi-color gradients.
How many predefined gradients are there?
Over 30 hand-picked presets in the gallery below the tool — mostly two-color combinations, plus several three-color gradients for more complex looks. Click any one to apply it instantly, then fine-tune the colors, stops, or angle.