CSS Gradient Generator
Color stops
CSS
A CSS gradient is a smooth transition between two or more colors, generated entirely by the browser from a short function call — no image file, no extra HTTP request, and it scales perfectly to any size with zero loss of quality. CSS defines three distinct kinds. linear-gradient() transitions in a straight line across the element, at an angle (90deg) or toward a named side or corner (to bottom right) — the classic diagonal or vertical color fade, and by far the most common in real designs (hero backgrounds, buttons, subtle section dividers). radial-gradient() transitions outward from a center point in a circle or an ellipse, useful for spotlight/glow effects or a soft vignette. conic-gradient() sweeps around a center point the way a clock’s hands do — the only one of the three that can produce a continuous color wheel or a pie-chart-style effect, since a straight-line or outward-radiating transition structurally can’t.
Color stops are the individual colors a gradient transitions between, each optionally pinned to a specific position (red 0%, blue 100%) rather than left to distribute evenly across the whole gradient. A stop’s position can matter a lot: three evenly-spaced stops read very differently from the same three colors compressed into the first half of the gradient with the last color holding steady for the second half. Every stop here also gets its own opacity, which is what makes fade-to-transparent effects (a spotlight glow, a soft image overlay) possible — a gradient stop’s transparency is set per-color, not on the gradient as a whole.
When to reach for each type. Linear covers the large majority of real use cases — section backgrounds, button fills, subtle depth cues — and is the safest default when you’re not sure which to pick. Radial is the right call specifically when you want the effect to read as emanating from a point (a highlight, a glow, a spotlight) rather than sweeping across a flat plane. Conic is a narrower tool: reach for it only when you specifically need a circular sweep — a color wheel, a pie/donut-chart-style visual, or a rotating-gradient loading spinner — since a linear or radial gradient cannot reproduce that shape at all.
Browser support for linear and radial gradients has been universal for well over a decade; conic gradients are newer but have shipped in every major browser (Chrome, Firefox, Safari, Edge) for years now, and only matter as a compatibility concern if you specifically need to support very old browser versions.
Examples
- A hero section background — pick a diagonal angle (e.g. 135deg) and two brand colors for a subtle two-stop <code>linear-gradient</code>, the most common real-world use: a large section background that reads as intentional and designed rather than a flat, static color.
- A radial spotlight effect — switch to Radial, set the shape to circle and the position to the center (or off-center, for a more dramatic look), and use a bright color fading to transparent (opacity 0%) as the second stop to simulate a light source or a vignette.
- A conic color wheel — switch to Conic and add 5 stops spanning red, yellow, green, blue, and back to red at 0%/25%/50%/75%/100% — the sweeping conic-gradient is the only one of the three gradient types that can produce this continuous hue-wheel effect at all.
Frequently asked questions
Is any of this sent anywhere?
Can I use rgba() for transparency?
rgba() or hsla() value when it's below 100%, and left as a plain opaque rgb() when it's at 100%. You can also type a color with its own alpha already baked in (e.g. #ff000080 or rgba(255, 0, 0, 0.3)) — the opacity slider always takes over from there as the one source of truth for that stop's transparency, so the two never fight over the final value.How good is browser support for linear, radial, and conic gradients?
How do I actually add this to my CSS?
background: linear-gradient(...);) and paste it directly into a CSS rule, a style attribute, or a CSS-in-JS template string — it's a complete, valid declaration as-is. If an element already has a background-color you want to keep as a fallback for browsers that somehow don't support gradients, add both properties: `background-color: #000;` first, then the generated `background: ...;` line after it, so the gradient overrides the solid color wherever it's supported.