CSS Linear Gradient — Syntax, Angle, Direction & Examples
Updated: May 2026
The linear-gradient() CSS function is one of the most versatile tools in a front-end developer's toolkit. Understanding how angles, direction keywords and multi-stop positions interact lets you build precise, maintainable backgrounds without a single image file.
Free · No upload · In your browser
Basic syntax
The minimal form takes a direction and at least two color stops:
You can replace the direction keyword with an angle in degrees. Both of the following produce a left-to-right gradient:
The background shorthand and background-image both accept the gradient function. Use background-image when you want to layer it with a background-color fallback.
Angle reference table
CSS gradient angles follow a different convention from SVG or math: 0deg goes bottom to top, and the value increases clockwise.
| Angle | Equivalent keyword | Direction |
|---|---|---|
| 0deg | to top | Bottom → Top |
| 45deg | to top right | Bottom-left → Top-right |
| 90deg | to right | Left → Right |
| 135deg | to bottom right | Top-left → Bottom-right |
| 180deg | to bottom | Top → Bottom |
| 225deg | to bottom left | Top-right → Bottom-left |
| 270deg | to left | Right → Left |
| 315deg | to top left | Bottom-right → Top-left |
On non-square elements, direction keywords like to bottom right always target the exact corner, regardless of element size. Degree angles are absolute and may appear to miss the corner on wide or tall elements.
Multi-stop gradients
Add as many stops as needed. Each stop is a color followed by an optional position (percentage or length):
Omitting positions lets the browser distribute stops evenly. Explicitly placing stops gives you precise control — useful when you need a color to cover a specific region, or when creating hard edges:
Repeating linear gradients
The repeating-linear-gradient() function tiles the gradient pattern indefinitely. The pattern is defined by the distance between the first and last stop:
This is ideal for striped backgrounds, diagonal hatching patterns and progress bar animations. The pixel-length stops create crisp, zero-blur transitions.
Transparency and rgba stops
Use rgba() or 8-digit hex values to include alpha transparency in stops:
This technique is common for overlays on hero images, fade-out effects at the edge of carousels, and glassmorphism card backgrounds. Stack the gradient on top of a background-color or an img element using background-image on a positioned pseudo-element.
Avoid transitioning between two fully transparent colors of different hues — browsers interpolate through grey in the middle. Instead, keep the same hue and only change alpha, or use color-mix() in modern browsers.
Stacking multiple gradients
The background property accepts a comma-separated list of images. You can layer several gradients (and even images) to build complex effects:
The first layer (leftmost) is on top. This pattern lets you darken a gradient for better text legibility without modifying the original gradient values.
Frequently asked questions
What does 0deg mean in a CSS linear gradient?
0deg points from the bottom to the top of the element. 90deg goes left to right, 180deg top to bottom, and 270deg right to left. The value increases clockwise, following standard CSS convention — not the mathematical convention where 0° is to the right.
What is the difference between "to right" and 90deg?
They produce visually identical results on square elements. On non-square elements, to right always ends at the exact right edge, while 90deg is an absolute angle that may visually miss the corner on very wide or tall elements. Direction keywords are safer for full-bleed layouts.
Can I animate a CSS linear gradient?
Direct transition between two gradient values is not supported by most browsers. The most common workaround is animating background-position on an oversized gradient, or using the @property at-rule to register and animate custom color properties in Chromium browsers.
How do I make a diagonal stripe pattern?
Use repeating-linear-gradient at 45deg with alternating color stops at the same position to create hard edges. Control stripe width by changing the pixel values between each pair of stops.