CSS Gradients — Linear, Radial, and How to Use Them
A CSS gradient is a smooth transition between two or more colors generated entirely by the browser — no image file required. The two core functions are linear-gradient() and radial-gradient(). A linear gradient blends colors along a straight axis defined by an angle (e.g. 135deg) or a direction keyword such as to right or to bottom left. A radial gradient radiates outward from a center point; you control its shape (circle or ellipse) and size with keywords like closest-side, farthest-corner (the default), or an explicit length. Both types accept unlimited color stops — each a color value plus an optional percentage position that pins where the transition lands.
Color stop placement is where fine-tuning happens. By default, stops are spread evenly, but you can override any stop's position: linear-gradient(90deg, #2a9d8f 20%, #264653 80%) holds the first color for the opening 20% and the second for the last 20%, compressing the blend into the middle. You can also insert a midpoint hint — a bare percentage between two stops — to shift the halfway point of the blend without adding a new color. For UI work, 2–3 stops almost always produce cleaner, more professional results than rainbow multi-stop gradients. If you need more colors, try pairing stops that are perceptually adjacent in HSL space to avoid the muddy grey zone that RGB interpolation can create through highly saturated hues. You can use the Palette Generator to find harmonious starting colors, or the HEX / RGB / HSL Converter to inspect their HSL values before committing.
Gradients work best as backgrounds for hero sections, cards, buttons, and decorative dividers — not behind body text. When you place text over a gradient background, accessibility requires a contrast ratio of at least 4.5:1 for normal text (WCAG AA). Because the luminance shifts across the gradient, check contrast at the lightest and darkest points. Here is a minimal, production-ready example:
/* Linear gradient — 135° angle, two stops */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Radial gradient — circle from center */
.card {
background: radial-gradient(circle, #8e2de2 0%, #4a00e0 100%);
}
/* Transparent fade — useful for overlays */
.overlay {
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
}Frequently Asked Questions
What is the difference between linear-gradient and radial-gradient?
A linear-gradient() blends colors along a straight line at a specified angle or direction, producing a one-dimensional sweep. A radial-gradient() spreads colors outward from a center point in a circular or elliptical shape, making it ideal for spotlight, halo, or glow effects. Choose linear for directional or angled backgrounds and radial for centered, organic-feeling designs.
How do I control the direction of a linear gradient?
Use a degree value where 0deg points upward (bottom-to-top), 90deg points right (left-to-right), and 180deg points down (top-to-bottom). Alternatively, use keyword syntax: to right, to bottom, to top left, etc. The Angle field in this generator sets that degree value directly — just type or adjust it to rotate your gradient live.
Can I add more than two colors to a gradient?
Yes — CSS gradients support any number of color stops, and this generator allows up to six. Click + Add stop to insert a new stop at the midpoint of the largest existing gap. Each stop has its own color picker and position input (0–100%), giving you precise control over multi-step transitions. For most UI purposes, 2–3 stops keep gradients looking clean and intentional.
How do I add transparency to a gradient?
Replace any stop's solid hex color with an rgba() or hsla() value that includes an alpha channel, for example rgba(0, 0, 0, 0.6). You can also use the 8-digit hex notation: #00000099 for roughly 60% opaque black. A common technique is fading from transparent to a solid color to create overlays that let a photo show through at the top while darkening toward the bottom for text legibility.
Does this generator export production-ready CSS?
Yes. Clicking Copy CSS copies the full background property declaration — for example, background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); — which you can paste straight into any stylesheet or design token. The output uses modern CSS syntax with no vendor prefixes, which are no longer needed in any evergreen browser. The Copy HEX colors button exports just the raw hex values if you want to bring them into another tool like the Palette Generator.