Gradient Generator

CSS Gradient Generator — Build Linear, Radial, and Conic Gradients with Live Preview

CSS gradients are one of the most versatile tools in a front-end developer's toolkit. They produce smooth color transitions entirely in code — no image files, no HTTP requests, no resolution limitations. A gradient defined in CSS renders crisply at any screen size, scales perfectly on retina displays, and can be combined with other CSS properties in ways raster images cannot. The hero background fading from deep blue to violet, the card with a subtle diagonal wash, the button that shifts from coral to amber on hover, the section divider with a soft color transition — all CSS gradients.

The friction with gradients is syntax. Writing color stops, adjusting angles, tweaking percentage positions, and getting the transition to look right requires significant trial-and-error when working directly in code. This generator removes that friction — pick colors, drag stops, set direction or shape, and see the result update live. Copy the CSS when you're satisfied.

Linear Gradients — Direction, Angle, and Practical Uses

A linear gradient transitions colors along a straight line. Direction is set with degrees or keywords:

0deg goes bottom to top. 90deg goes left to right. 180deg goes top to bottom. 135deg goes top-left to bottom-right. Keywords — to right, to bottom, to top left — are often more readable than degree values.

Real-world uses: Hero section backgrounds with diagonal fades. Button hover states that shift hue on interaction. Overlay gradients layered on background images — dark-to-transparent from bottom to top — to keep overlaid text readable over photography. Section dividers that soften the transition between two background colors. Text gradient effects using background-clip: text with color: transparent. A single CSS declaration replaces what used to require a sliced image and an extra HTTP request.

Common mistake: Setting background-color to a gradient value. background-color only accepts solid colors. Gradients go in background or background-image. This is one of the most frequent CSS debugging sessions — the gradient works in a CSS gradient playground but "disappears" when pasted into a rule that uses the wrong property.

Radial Gradients — Spotlight, Glow, and Concentric Patterns

Radial gradients radiate outward from a center point in a circular or elliptical shape: radial-gradient(circle at center, #3b82f6, #1e1b4b). The shape is either circle (uniform radius) or ellipse (default, stretches to fit the element's aspect ratio). The position specifies where the center sits — at center, at top left, at 30% 70%.

Use cases: Spotlight effects on hero sections where a bright center fades to a dark background. Glowing card or button backgrounds with a bright center fading outward. Vignette overlays for photography-style presentation. Concentric ring patterns using repeating-radial-gradient for decorative UI elements. A radial gradient positioned at the top-right of a card can simulate directional lighting — useful for product photography layouts.

Conic Gradients — Pie Charts and Angular Patterns

Conic gradients sweep colors around a center point like a clock hand: conic-gradient(from 0deg, red, yellow, green, blue, red). Unlike linear and radial gradients where stops position along a line or radius, conic gradient stops position around the full 360°.

Use cases: Pie charts and donut charts rendered entirely in CSS — no SVG, no canvas, no JavaScript. A conic gradient with hard color stops at specific percentages creates chart slices directly. Color wheel visualizations. Angular accent elements. Combined with mask or border-radius tricks, conic gradients produce ring charts, loading spinners, and circular progress indicators. The CSS is more compact and more maintainable than equivalent SVG markup for simple visualizations.

Color Stops, Positions, and Hard Transitions

A color stop pairs a color with an optional position (percentage or length) defining where it appears along the gradient. Without explicit positions, stops space evenly: linear-gradient(to right, red, blue) puts red at 0%, blue at 100%.

With explicit positions, you control exact layout: linear-gradient(to right, red 0%, red 40%, blue 60%, blue 100%) — solid red for 40%, solid blue from 60%, short fade between them. This is the technique for gradient buttons, progress bars, and striped patterns.

Hard transitions: Two stops at the same position create an instantaneous color change with no fade: linear-gradient(to right, red 50%, blue 50%). This is how CSS gradients produce striped backgrounds, segmented progress bars, and checkerboard patterns — all without images.

Transition hints: A bare percentage between two stops — linear-gradient(to right, red, 30%, blue) — moves the midpoint to 30% instead of the default 50%, creating an asymmetric transition that decelerates. This is useful for subtle hero backgrounds where you want the color to shift quickly at the top and settle slowly toward the bottom.

The Grey Desaturation Problem and Color Space Interpolation

The most common gradient frustration: two saturated complementary colors (blue and orange, red and green) blended through the default sRGB interpolation produce a muddy grey at the midpoint. This happens because sRGB's mathematically halfway point between complementary hues falls in a low-saturation zone.

The fix: Modern CSS supports color space interpolation. Adding in oklch or in hsl to the gradient function tells the browser to blend through a perceptually uniform color space that keeps saturation high throughout: linear-gradient(in oklch to right, #0ea5e9, #f97316). The result is vivid, vibrant transitions even between complementary colors. Browser support is solid in modern versions (Chrome 111+, Firefox 113+, Safari 16.2+). For older browsers, add an intermediate saturated stop at the midpoint to manually bridge the transition.

Performance note: CSS gradients are painted by the browser's rendering engine — they don't create DOM elements or cause reflows. However, complex gradients with many stops, especially when applied to large elements and layered with mix-blend-mode, can impact compositing performance on lower-end GPUs. For background gradients that don't change, consider whether a static SVG or CSS gradient is more efficient than an animated one on mobile devices.

Frequently Asked Questions About CSS Gradients