About

CSS linear gradients interpolate color values along a directional axis defined by an angle θ in degrees. A misconfigured gradient - wrong stop positions, clashing hues, or banding artifacts from insufficient color stops - produces unprofessional results that degrade perceived quality of any interface. This tool computes the exact linear-gradient() declaration with unlimited color stops, each positioned at a percentage p along the gradient line from 0% to 100%. It renders a real-time Canvas preview at full resolution so you see exactly what the browser will paint.

The generator outputs copy-ready CSS. It handles edge cases: duplicate stop positions create hard color boundaries, a single stop produces a solid fill, and stops beyond 100% are clamped. Note: gradient rendering varies slightly between browsers at sub-pixel level. This tool targets the W3C CSS Image Values Level 3 specification. Pro Tip: for smooth gradients, keep perceptual distance between adjacent stops roughly equal in HSL lightness.

Formulas

A CSS linear gradient is defined by an angle and a series of color stops. The browser computes the gradient line through the center of the element at the specified angle, then interpolates colors between stops.

linear-gradient(θdeg, C₁ p₁%, C₂ p₂%, … , C_n p_n%)

Where θ = rotation angle from vertical axis (0° = bottom to top). C_i = color value at stop i (HEX, RGB, or HSL). p_i = position of stop i along the gradient line, 0% ≤ p ≤ 100%.

The gradient line length L for an element of width w and height h is:

L = |w ⋅ sin(θ)| + |h ⋅ cos(θ)|

Color interpolation between two adjacent stops uses linear interpolation in sRGB space per channel:

C(t) = C_i ⋅ (1 − t) + C_i+1 ⋅ t

Where t = p − p_ip_i+1 − p_i is the normalized position between stops.

Reference Data

Angle	Direction	CSS Keyword	Use Case
0°	Bottom → Top	`to top`	Vertical fade-up backgrounds
45°	Bottom-Left → Top-Right	`to top right`	Diagonal hero sections
90°	Left → Right	`to right`	Horizontal progress bars
135°	Top-Left → Bottom-Right	`to bottom right`	Card overlays
180°	Top → Bottom	`to bottom`	Default gradient direction
225°	Top-Right → Bottom-Left	`to bottom left`	Reverse diagonal overlays
270°	Right → Left	`to left`	RTL interface accents
315°	Bottom-Right → Top-Left	`to top left`	Decorative backgrounds
Common Gradient Presets
135°	Warm Sunset	`#FF6B6B → #FFA07A`	Landing pages, CTAs
90°	Ocean Breeze	`#667eea → #764ba2`	SaaS headers
45°	Fresh Mint	`#00b09b → #96c93d`	Health/eco themes
180°	Cool Steel	`#bdc3c7 → #2c3e50`	Corporate dashboards
120°	Berry Smoothie	`#e96443 → #904e95`	Creative portfolios
60°	Peach Glow	`#ffecd2 → #fcb69f`	Soft UI backgrounds
200°	Deep Space	`#000428 → #004e92`	Dark mode hero sections
90°	Lemon Drop	`#f7ff00 → #db36a4`	Bold, playful accents
135°	Northern Lights	`#43cea2 → #185a9d`	Teal-blue transitions
270°	Lavender Haze	`#c471f5 → #fa71cd`	Feminine/artistic layouts

Frequently Asked Questions

Banding occurs when the color difference between adjacent stops is too large relative to the physical pixel count along the gradient line. Add intermediate color stops to reduce the perceptual jump between colors. A gradient spanning from dark blue to white across 1000px with only 2 stops will show fewer bands than one across 200px, because more pixels are available for interpolation. Also consider using HSL-adjacent colors rather than complementary ones to minimize banding.

When two stops share an identical position value (e.g., both at 50%), the browser creates a hard edge - an instant transition with no interpolation between those colors. This technique is used to build striped patterns or sharp color boundaries. For example, linear-gradient(90deg, red 50%, blue 50%) produces a clean split at the midpoint.

Per the W3C specification, 0° points upward (bottom to top). The angle increases clockwise: 90° goes left to right, 180° goes top to bottom, and 270° goes right to left. This is the opposite of standard trigonometric convention where angles increase counter-clockwise. Older webkit prefixed syntax used the trigonometric convention, which is why legacy code may appear rotated 90° compared to modern syntax.

Yes. CSS gradients are rasterized by the GPU during paint. The browser computes a texture once and caches it until the element resizes or the style changes. Even 10-15 color stops add negligible overhead. The bottleneck is never the number of stops - it is the number of elements using unique gradients that each trigger separate texture allocations. A single element with 20 stops is cheaper than 20 elements each with 2-stop gradients.

Three common causes: (1) Your element has a different aspect ratio than the preview, which changes the gradient line length L and thus the visual distribution of stops. (2) Your project applies a CSS filter, opacity, or blend mode that alters perceived colors. (3) Color management: if your monitor profile differs from sRGB, the preview here (Canvas) and your browser's CSS renderer may disagree slightly. Always test on the target viewport dimensions.

Replace linear-gradient with repeating-linear-gradient in the output CSS. Set your last color stop at a position less than 100% - for example, 20% - and the browser tiles the gradient five times across the element. This tool generates the stop values; you only need to swap the function name in your stylesheet.