UtilitiesHub

Gradient Generator

Create CSS gradients for backgrounds, buttons, hero sections, and overlays. Adjust gradient type, angle, and color stops, then copy or download the generated CSS.

Current angle: 135deg
0%
50%
100%
100%

Explore More

Go straight to the formatter, validator, encoder, generator, or developer utility you need.

Coding Tools

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, can be animated with JavaScript, and can be combined with other CSS properties in ways that no raster image can match. The hero background that fades 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 — these are all CSS gradients.

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

Linear Gradients — Direction, Angle, and Common Uses

A linear gradient transitions colors along a straight line from one point to another. The direction is set with an angle in degrees or a keyword direction:

0deg goes from bottom to top. 90deg goes left to right. 180deg goes top to bottom. 135deg goes top-left to bottom-right diagonally. Keywords like to right, to bottom, to top left also work and are often more readable than degree values.

Common use cases for linear gradients: full-width hero section backgrounds (top-to-bottom or diagonal), navigation bar color washes, button hover state color shifts, text gradient effects (clipped to text shape with background-clip: text), overlay gradients layered over background images (a dark-to-transparent overlay that keeps text readable over photos), and section dividers that fade between two background colors.

Radial and Conic Gradients

Radial gradients radiate outward from a center point in a circular or elliptical shape. They're defined with radial-gradient(shape at position, color-stops). The shape is either circle (uniform radius in all directions) or ellipse (default, stretches to fit the element). The position sets where the center point is — at center, at top left, at 30% 70%. Common uses: spotlight effects on hero sections, glowing button or card backgrounds, vignette overlays, and concentric ring patterns for decorative UI elements.

Conic gradients sweep colors around a center point, like the hands of a clock moving in a circle. They're defined with conic-gradient(from angle at position, color-stops). Unlike linear and radial gradients where stops define a position along a line or radius, conic gradient stops define angular positions (degrees or percentages around the full 360°). Common uses: pie charts and donut charts (conic gradients render the slices directly in CSS), color wheel or spectrum visualizations, and angular accent elements in UI design.

Color Stops, Positions, and Hard Transitions

A color stop is a color value paired with an optional position (percentage or length) that defines where that color appears along the gradient. Without explicit positions, stops are spaced evenly:

linear-gradient(to right, red, blue) — red at 0%, blue at 100%, smooth fade between them.

With explicit positions, you control the exact layout: linear-gradient(to right, red 0%, red 40%, blue 60%, blue 100%) — solid red for the first 40%, solid blue from 60% to 100%, with a short fade only between 40% and 60%.

Placing two stops at the same position creates a hard, instantaneous color transition with no fade at all: linear-gradient(to right, red 50%, blue 50%) — sharp division at 50%. This is how CSS gradients can produce striped, segmented, or checkerboard patterns without any images.

A transition hint — a bare percentage value between two color stops — moves the midpoint of the transition earlier or later: linear-gradient(to right, red, 30%, blue) makes the red-to-blue transition reach its midpoint at 30% of the element width rather than 50%, creating an asymmetric transition that feels faster early and slower late.

The Grey Desaturation Problem and How to Fix It

One common frustration with CSS gradients is the "dead zone" — when two saturated, complementary colors (like blue and orange, or red and green) are blended, the midpoint passes through a dull, grey-looking range. This happens because the default gradient color interpolation happens in the sRGB color space, where the mathematically halfway point between two saturated complementary colors tends to be a low-saturation grey.

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

Frequently Asked Questions About CSS Gradients

Use the background or background-image property. For example: background: linear-gradient(135deg, #667eea, #764ba2);. Note that background-color does not accept gradients — only background or background-image work. The generated CSS from this tool uses the correct property. You can also layer a gradient over an image: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('image.jpg');
This is the classic "grey dead zone" problem that happens when two saturated complementary colors (like blue and orange) are interpolated in the default sRGB color space — the midpoint passes through unsaturated grey. The fix is to use oklch or hsl color space interpolation: linear-gradient(in oklch, #0ea5e9, #f97316). Browser support for color space interpolation in gradients is in modern browsers (Chrome 111+, Firefox 113+, Safari 16.2+). Alternatively, add an intermediate color stop at the midpoint to steer the transition away from grey.
Yes. Apply the gradient to background-image, then set -webkit-background-clip: text and color: transparent. This clips the gradient to the text shape: background: linear-gradient(90deg, #f97316, #8b5cf6); -webkit-background-clip: text; color: transparent;. This technique works in all modern browsers. The standard (non-prefixed) background-clip: text also works in most modern browsers now, but adding the -webkit- version provides broader coverage.
CSS @keyframes can't directly animate gradient color values (they're not interpolatable in most browsers). The common workaround is to animate background-position on an oversized gradient: set background-size: 200% 200% and animate background-position between 0% 50% and 100% 50%. Another approach is to use CSS custom properties (variables) as color stop values and animate those with JavaScript or the Web Animations API.
linear-gradient fills the entire element with a single gradient from start to end. repeating-linear-gradient tiles the gradient pattern repeatedly across the element based on the size defined by the last color stop's position. For example, repeating-linear-gradient(45deg, #f97316 0px, #f97316 10px, transparent 10px, transparent 20px) creates a diagonal stripe pattern. This technique is useful for creating striped backgrounds, progress bars, and decorative patterns entirely in CSS.