Gradient Generator
Create stunning CSS gradients with multiple colors & directions. Copy-paste ready code for linear & radial gradients. No coding skills required.
linear-gradient(90deg, #3b82f6 0%, #ec4899 100%);Colors & Stops
How to Use This Tool — 30-Second Start
- Select a gradient type: Linear, Radial, or Conic.
- Pick your color stops — minimum two, up to eight for complex gradients.
- Drag the position sliders to control where each color begins and ends (0–100%).
- For linear gradients, set the angle (0°–360°).
90deg= left-to-right;180deg= top-to-bottom. - Click Copy CSS to grab the generated
backgrounddeclaration — paste-ready for any stylesheet.
The Math Behind the Colors
Every CSS gradient interpolates between color stops in the sRGB color space by default (CSS Color Level 4 also supports oklch and lab). The browser computes intermediate colors via linear interpolation per channel:
/* Channel interpolation formula */
C(t) = C₁ + t × (C₂ − C₁)
/* where t = normalized position between two stops (0.0 – 1.0) */
/* Applied independently to R, G, B (and A if using rgba) */
For a linear gradient, the rendering axis is defined by the angle vector (cos θ, sin θ). Each pixel's position along that axis determines its t value. The CSS spec (W3C CSS Images Module Level 3) mandates that gradient line length equals the distance between the two corners of the element that the gradient line passes through — ensuring full coverage regardless of element dimensions.
Radial gradients use an elliptical coordinate system. The shape and size keywords (closest-side, farthest-corner, etc.) mathematically determine the ellipse's semi-axes, after which the same linear interpolation applies along the radial distance from center.
Conic gradients interpolate around the circumference of a circle: t = θ / 360°, where θ is the angle from the starting point. This is the same geometry used in pie charts and color wheels.
Color Stop Anatomy
| Parameter | Valid Range | Effect on Output |
|---|---|---|
| Color value | Any CSS color format | Defines the exact hue, saturation, and lightness at that stop |
| Position | 0% – 100% | Pins the stop at a specific point along the gradient axis |
| Hint (midpoint) | Between two stops | Shifts the 50% blend point, creating asymmetric transitions |
| Alpha channel | 0 – 1 (or 0% – 100%) | Controls opacity; enables fade-to-transparent effects |
Reading Your Output: What Makes a Gradient Work
Contrast Ratio
If your gradient underlies text, WCAG 2.1 (Level AA) requires a minimum 4.5:1 contrast ratio for body text and 3:1 for large text (18pt+). Test the darkest and lightest point of your gradient against your text color — not just the midpoint. Tools like the W3C contrast checker use the relative luminance formula: L = 0.2126R + 0.7152G + 0.0722B (linearized sRGB values).
Perceptual Smoothness
A gradient that looks smooth in preview can show Mach bands — visible stripes at abrupt luminance transitions — on OLED displays. This typically happens when lightness drops more than ~15 percentage points in under 10% of the gradient width. Adding an intermediate color stop at the midpoint with a slightly adjusted hue (±5°) breaks up the transition optically without changing the perceived palette.
Color Space Matters
| Color Space | CSS Syntax | Best For | Watch Out For |
|---|---|---|---|
| sRGB | rgb() / hex | Universal compatibility | Gray "dead zone" in complementary blends |
| oklch | oklch() | Perceptually uniform transitions | Safari 15.4+, Chrome 111+ only |
| display-p3 | color(display-p3 …) | Vibrant wide-gamut screens | Colors clip on sRGB monitors |
Pro Tip: Use Hue Rotation to Avoid the "Gray Mud" Problem
When blending two colors that sit opposite each other on the color wheel (e.g., blue → orange), sRGB interpolation passes through a desaturated gray midpoint. Most generators don't mention this. The fix: add a transitional color stop at 50% using a hue that sits on the shorter arc between your two endpoints on the HSL wheel. For blue (240°) to orange (30°), that midpoint hue is around 315° (magenta) — keeping saturation and lightness constant. The result is a vivid, fully saturated gradient instead of a washed-out middle. Alternatively, switch interpolation to oklch (CSS Color 4), which handles this automatically at the browser level.
Anatomy of the Generated CSS
/* Linear example */
background: linear-gradient(
135deg,
#1a1a2e 0%,
#e94560 50%,
#0f3460 100%
);
- 135deg — diagonal, top-left to bottom-right. Change to
to rightfor keyword syntax. - 0%, 50%, 100% — explicit positions. Omitting them distributes stops evenly; explicit values give you control over transition speed.
- The output is a single
backgroundshorthand — safe to layer withbackground-imagefor stacking multiple gradients or over abackground-colorfallback.
Browser Support at a Glance
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| linear-gradient | 26+ | 16+ | 6.1+ | 12+ |
| radial-gradient | 26+ | 16+ | 6.1+ | 12+ |
| conic-gradient | 69+ | 83+ | 12.1+ | 79+ |
| oklch interpolation | 111+ | 113+ | 15.4+ | 111+ |
Source: MDN Web Docs browser compatibility data (2025). Global linear-gradient support: 98.6%.
Sources & References
Technical claims verified against W3C standards and MDN documentation.
Official spec defining linear, radial, and conic gradient rendering, gradient line geometry, and color stop interpolation.
Defines oklch, lab, display-p3, and the interpolation rules used when blending color stops across different color spaces.
Source for the 4.5:1 and 3:1 contrast ratio requirements referenced in the accessibility section.
Original research behind oklab/oklch, explaining why it avoids the hue-shift and gray mud artifacts that sRGB interpolation produces.