Linear Gradient Generator
Build CSS linear gradients with full control over angle and color stops.
Gradient stops
2/5/* Fallback for browsers that do not support gradients */ background-color: #4F46E5; /* Legacy WebKit */ background-image: -webkit-linear-gradient(135deg, #4F46E5 0%, #EC4899 100%); /* Modern browsers */ background-image: linear-gradient(135deg, #4F46E5 0%, #EC4899 100%);
Selected stop
0%Color stops
Presets
A linear gradient interpolates between colors along a single axis. The angle controls the direction — 0° points up, 90° points right, 180° down, 270° left, with values in between for diagonals. Browsers also accept directional keywords like to bottom right if you prefer readability over precision; under the hood they resolve to specific angles based on the box dimensions.
The most pleasant linear gradients keep the hue rotation small (under 60° on the color wheel) so the transition feels smooth rather than rainbow-like. Two adjacent or analogous colors blend cleanly; complementary colors blended directly produce a muddy midpoint where the colors cancel each other into gray. To work around this, use three stops — start color, a saturated mid color slightly off the midpoint, end color — which steers the gradient through a more saturated path and avoids the gray middle.
Banding is the other common pitfall. On 8-bit displays (still the majority), gradients across very subtle lightness differences show visible stripes because there are not enough discrete color values to render a smooth transition. The fix is either to widen the lightness range, add a tiny amount of noise or grain to the gradient surface, or accept the banding for short gradients (under ~200px) where it is barely visible. Some designers add a fine SVG noise filter on top of subtle gradients to mask the banding.
Frequently asked questions
What angle should I use for a diagonal gradient?+
135° is the most popular choice — top-left to bottom-right — because it follows the natural reading flow in left-to-right scripts. 45° (bottom-left to top-right) feels more upbeat and is common on landing pages. Pure horizontal (90°) or vertical (180°) feel more formal and are often used for overlays and sectioning rather than hero backgrounds.
Can I have more than two colors?+
Yes. CSS linear-gradient() supports any number of stops. This generator caps it at 5 to keep things tasteful — beyond that, gradients tend to look like rainbow swatches rather than considered design. For most use cases, 2-3 stops produce the cleanest result; 4-5 are useful for sunset, sky and abstract textures.
Why does my gradient look muddy in the middle?+
When you blend two complementary colors directly (red to green, blue to orange), the linear interpolation passes through a desaturated gray midpoint. The fix is to add a saturated middle stop slightly off the geometric midpoint, which steers the gradient through a more vivid path and avoids the gray transition zone.
How do I avoid visible banding in subtle gradients?+
Banding shows up when the lightness range is very narrow on 8-bit displays. Options: widen the lightness or hue range, add subtle noise on top of the gradient with an SVG filter, or move to a wider gamut by using P3 colors (color(display-p3 ...)) where the device supports it. For decorative gradients, keep them small or add grain.
Should I use named directions or angles?+
Both are valid CSS. Directional keywords (to bottom right) are easier to read but resolve to different exact angles depending on box dimensions, which can cause subtle differences across breakpoints. Numeric angles (135deg) are predictable across viewport sizes. Use keywords for prototypes and angles for production.