CSS gradient generator. Linear, radial, conic.
Pick a type, add color stops, drag positions. Live preview renders behind a sample card. CSS output ready to paste, plus a Tailwind extend.backgroundImage snippet for design-system use. No signup.
Pick a gradient type, add color stops, set the angle. Live preview renders behind a sample card. Copy the CSS or the Tailwind snippet. Browser-only — no upload, no signup.
// CSS appears here// Tailwind extend.backgroundImage snippetPrivacy: gradient generation happens in your browser. Nothing is sent or logged.
Five rules. Defaults that read.
Rule 1: Two-stop is the default. Most production gradients are two colors flowing one direction. The simplicity is the appeal — your eye reads the depth without parsing a complex color story. Add a third stop only when the middle color genuinely contributes (warming a sky, adding a glow midpoint). Above three stops you're usually painting yourself into a corner.
Rule 2: Adjacent hues, varied lightness. Gradients that span across the color wheel (red → blue) often look muddy because the midpoint lands somewhere unappealing. Gradients that stay within one hue family but vary in lightness or saturation read clean — sage to forest, peach to terracotta, ivory to cream. The two preset gradients on this page (moss, ember) demonstrate the pattern.
Rule 3: Match the angle to the content. 180deg (top-to-bottom) is the convention for sky / atmospheric backgrounds. 135deg or 45deg adds visual energy — used in marketing hero gradients to suggest motion. 90deg (left-to-right) is the convention for progress bars and timeline elements. 0deg (bottom-to-top) is unusual and reads as "rising" — useful for graphs or growth-themed surfaces.
Rule 4: Soft transitions read as premium; hard transitions read as playful. A gradient with stops at 0% and 100% has the smoothest possible transition. Adding a stop at 50% with the same color creates a flat midpoint. Stops at 45% and 55% create a hard edge in the middle (used in retro-styled designs). The position of the stops controls the rhythm; the colors control the palette.
Rule 5: Test on the darkest content the gradient will hold. A gradient that looks beautiful empty often loses contrast when text is placed over it. Always test with the actual text content, especially body copy at small sizes. Pair with our Color Contrast Checker to verify WCAG AA compliance over the gradient's darkest and lightest points.
Four jobs this tool covers.
Job 1: Build a hero background. Pick the type, drop in the brand colors, set the angle, copy the CSS. Most modern landing pages use a subtle linear gradient instead of flat color for the hero — adds depth without distracting from the content. The Tailwind snippet drops directly into a design-system config so the gradient becomes a reusable token.
Job 2: Design a button hover state. Two-stop linear gradients are the convention for button hover effects. Build in default state, copy the CSS, build hover state slightly brighter, copy that CSS, wire to :hover. The shift in gradient between states is what gives buttons their tactile feel.
Job 3: Create a brand color story. When designing a new brand palette, build several gradients across the candidate colors to see how they interact. Gradients reveal which color combinations are harmonious and which fight. Pair with our Color Contrast Checker for the accessibility-floor check.
Job 4: Design system tokens. The Tailwind snippet output is the format design-system maintainers use. Drop into your tailwind.config.js under extend.backgroundImage and the gradient becomes a utility class everyone on the team can use consistently. Pair with our web design service on a real engagement.
Six questions users ask.
Linear vs radial vs conic — which to use?
Linear gradients flow in one direction (top-to-bottom, left-to-right, any angle) and read as classic depth or atmosphere — sky, surface, button-fill. Radial gradients emit from a center point outward and read as light source or focal emphasis — spotlight effect, glow halo, button hover. Conic gradients sweep around a center point like a clock hand and read as circular progress, color wheel, or playful texture. About 80% of production gradient use is linear; radial and conic are reserved for specific effects.
How many color stops should I use?
Two for clean depth (the modern brand-system default), three for warmer atmospherics (sunset, foliage), four-plus for lively or playful surfaces. More than five stops usually reads as confused — pick the colors that genuinely contribute and drop the rest. The position percentages matter more than people think; a 0%/100% gradient is symmetric, a 0%/30%/100% gradient pushes the second color toward the start (giving the feel of a soft glow). Drag the positions in the live preview to find the rhythm.
What's the angle parameter for linear gradients?
The angle in degrees from which the gradient points TO. 0deg points up (gradient flows from bottom to top). 90deg points right (left to right). 180deg points down (top to bottom — most common for sky / button gradients). 270deg points left. Any value 0-360 works. The keyword forms ('to top', 'to right', 'to bottom right') translate to specific angles internally; the keyword form is more readable but the angle form is more flexible for off-axis directions.
Do gradients hurt performance?
No, modern browsers render CSS gradients as fast as solid colors — they're computed once at element paint time and don't trigger reflow. The performance concern is animating gradient stops or positions, which forces a repaint per frame; use CSS custom properties + transform-based animation instead. For static gradients, no performance cost. For very complex gradients (10+ stops or layered backgrounds), the file size of the CSS itself is the only concern, and even that is negligible.
What about browser support for conic gradients?
Conic gradients have been baseline-supported in all major browsers since 2022 (Chrome 69, Safari 12.1, Firefox 83, Edge 79). For audiences on browsers older than that (vanishingly small in 2026), the conic gradient falls back to whatever background-color you set. Linear and radial gradients have universal support back to IE10. No need to ship vendor prefixes for any gradient type in 2026 — every browser interprets the unprefixed form correctly.
Is the gradient I build sent anywhere?
No. Generation happens entirely in your browser. The page is static HTML; the only network request is the initial page load. Safe for unpublished brand explorations or any color choices you don't want shared with a third party.
Published · Last updated .