CSS Linear Gradient: Syntax, Examples, and Best Practices

A CSS linear gradient blends two or more colors along a straight line, painted by the browser with no image file to download. The minimal syntax is one function: background: linear-gradient(#6366f1, #ec4899) fades indigo into pink from top to bottom. Add a direction as the first argument and you steer the line: linear-gradient(to right, #6366f1, #ec4899) runs the same fade left to right. Per MDN's linear-gradient reference, the function returns a <gradient> value, a kind of generated image, so it works anywhere an image does.

That is the whole idea in one line. Everything past it, angles, color-stop positions, and repeating stripes, is a refinement of the same pattern. This guide covers the full linear-gradient syntax, how direction keywords map to angles, how color stops control the fade, and where the technique tends to trip people up.

Key Takeaways

• A CSS linear gradient is a browser-generated image, so it scales cleanly and ships zero files (MDN).
• The first argument sets direction: an angle like 45deg or a keyword like to right. Omit it and the default is top to bottom.
• 0deg points up and 90deg points right, which is not the same as most math conventions.
• Color stops pair a color with a position (% or px); repeating-linear-gradient() tiles the pattern into stripes.
• Linear gradients have near-universal browser support today (caniuse).

What Is a CSS Linear Gradient?

A CSS linear gradient is a color transition the browser computes along a single straight axis, not a bitmap you supply. It belongs to the <image> data type, which is why it slots into background-image, border-image, mask-image, and any other image-accepting property. MDN's gradient documentation lists the family of gradient functions and confirms that each produces an image, not a color.

The axis is what makes it linear. Colors progress evenly from one end of that axis to the other, and every pixel along a line perpendicular to the axis shares the same color. Compared with a radial gradient, which fades outward from a point, the linear version fades in a single fixed direction. If you need the circular version instead, the radial gradient guide covers it, and both types are surveyed in the main CSS gradient guide.

Every linear gradient has the same two ingredients: an optional direction and a list of color stops. The direction sets the angle of the axis; the color stops set which colors land where along it. The browser interpolates smoothly between adjacent stops, so a two-color gradient is just a fade and a five-color gradient is four fades chained end to end. This behavior is standardized in the CSS Images Module Level 4, which defines exactly how the line is measured and how stops are interpolated.

The Basic linear-gradient Syntax

The linear-gradient syntax reads left to right: direction first, then stops. linear-gradient(to right, red, blue) says 'run the axis rightward, start red, end blue.' Drop the direction and linear-gradient(red, blue) defaults to a top-to-bottom fade, the single most common form. The color value reference covers every color format a stop accepts, from hex to rgb() to named colors.

Assign the result to an image property and the element paints it: background: linear-gradient(to bottom right, #0ea5e9, #6366f1). Note the double parentheses when people quote it inline, one for the function, none extra. The function itself takes a comma-separated argument list, and the browser fills the element edge to edge with the computed fade.

How Does CSS Linear Gradient Direction Work?

CSS linear gradient direction is set by the first argument, either an angle in degrees or a to keyword, and it defaults to to bottom when omitted. Angles in CSS gradients run clockwise from a vertical baseline, which surprises people expecting math conventions. Per MDN's linear-gradient reference, 0deg points straight up and larger values rotate clockwise from there.

The two ways to express direction are not interchangeable in feel, only in result. Keywords like to right read clearly and never need mental math, while angles give you precision a keyword cannot, say a 23deg tilt. Keywords also stay correct when the box changes aspect ratio, because to bottom right always aims at the actual corner regardless of the element's shape. An angle stays a fixed angle no matter the box.

The common angles and keywords map like this, so you can switch between them with confidence:

Keyword	Equivalent angle	Fade travels
to top	0deg	Bottom to top
to right	90deg	Left to right
to bottom	180deg	Top to bottom (default)
to left	270deg	Right to left
to bottom right	angle varies with box	Top-left to bottom-right corner

The corner keywords carry a subtle rule. to bottom right does not equal a hard-coded 135deg unless the box is a perfect square. The browser adjusts the angle so the gradient line reaches the exact corner, keeping the two colors anchored to opposite corners as the element resizes. That is why keyword directions are the safer default for responsive layouts, and angles are the tool when you want a tilt that ignores the box shape.

How Do Color Stops Control a Linear Gradient?

Color stops are where a linear gradient stops being a plain fade and becomes a design. A stop is a color plus an optional position, and the browser interpolates smoothly between adjacent stops. Omit the positions and colors distribute evenly across the line; add them and you place each color exactly. The CSS Images specification defines this interpolation precisely, including how out-of-order positions are handled.

Linear gradient color stops accept two position units, and the choice matters. Percentages flex with the element: a stop at 50% always sits at the midpoint of the gradient line. Pixels stay fixed: a stop at 40px sits a set distance from the start regardless of size. linear-gradient(to right, #6366f1 0%, #ec4899 100%) spreads the fade across the whole box, while linear-gradient(to right, #6366f1 40px, #ec4899 80px) confines the transition to a narrow band and leaves solid color on either side.

Using Three or More Color Stops

A gradient is not limited to two colors. List as many stops as the design needs, each with its own position, and the browser chains the fades together. linear-gradient(to right, #6366f1, #8b5cf6, #ec4899) passes through violet at the midpoint, because three unpositioned stops distribute at 0%, 50%, and 100%. Add explicit positions to weight the transition toward one end, like #8b5cf6 30% to shift the violet earlier.

Two stops at the same position create a hard line instead of a fade, which is the trick behind solid color bands. linear-gradient(to right, #6366f1 50%, #ec4899 50%) splits the box cleanly in half with no blend at all. Chain several of these and you get flags, progress tracks, and layered stripes, all from one gradient string. In our experience, the same-position hard stop is the single most useful pattern people miss when they first learn the syntax.

How Do You Write a CSS Linear Gradient?

The fastest route is a visual generator that writes the code for you. ToolSura's CSS gradient generator lets you pick colors, drag the stops, and set the angle, then copies production-ready CSS. When you write one by hand, the process is five short steps.

1. Start the function: linear-gradient() assigned to background or background-image.
2. Set the direction as the first argument: an angle like 135deg or a keyword like to right. Skip it to accept the top-to-bottom default.
3. List at least two color stops, each a color optionally followed by a position such as 0% or 20px.
4. Add more stops for multi-color fades, or place two stops at the same position for a hard-edged band.
5. Preview across screen sizes, then nudge the stop positions until the transition lands where you want it.

A complete example ties the steps together: background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%) paints an indigo-violet-pink diagonal. Change 135deg to to right and the fade turns horizontal; move the middle stop to 25% and the violet crowds the top-left. Every linear gradient you will ever write grows from that one pattern.

How Does repeating-linear-gradient Create Stripes?

A repeating linear gradient tiles a stop pattern across the whole element instead of stretching it once, which is how you draw stripes, checks, and hatching in pure CSS. It takes the same arguments as linear-gradient(), but the browser loops the pattern as soon as the last stop position is reached. Per MDN's repeating-linear-gradient reference, the repetition length equals the distance from the first to the last color stop.

That last detail is the whole mechanism. Because the pattern repeats at the final stop position, the spacing between your stops sets the stripe width. repeating-linear-gradient(45deg, #6366f1 0 10px, #ec4899 10px 20px) draws 45-degree diagonal stripes 10 pixels wide, because the pattern spans 20 pixels and then tiles. Using hard stops (same-position pairs) inside a repeating gradient gives crisp bands; using soft stops gives a repeated fade, useful for subtle texture.

Repeating gradients replace a lot of tiny background images. A striped loading bar, a graph-paper grid, a barber-pole animation, all of them used to need a PNG and now need one line of CSS. CSS-Tricks' gradient overview demonstrates several repeating patterns you can copy. The catch is that a heavily tiled gradient can be more expensive to paint than a small tiled image on very large surfaces, so profile before you carpet a full-page background with dense stripes.

Common Linear Gradient Pitfalls

Most linear gradient bugs trace back to a handful of predictable mistakes. Knowing them upfront saves a lot of squinting at the wrong angle. MDN's gradient documentation is the reference to keep open while you debug, and caniuse's gradient table confirms what needs a prefix.

The angle direction is the classic trap. A gradient angle is not a math angle: 90deg points right, not up, and angles rotate clockwise from the top. People reaching for 0deg expecting a rightward fade get a vertical one instead. When an angle looks wrong, it is usually rotated 90 degrees from what you pictured, so add or subtract 90 and check.

A gradient is an image, not a color, which is the second common gotcha. You cannot assign it to color, background-color, or border-color; those properties reject image values. Use background or background-image for the fade, and for gradient borders reach for the border-image workaround covered in the gradient border guide. A missing fallback color is a related risk on ancient browsers, though caniuse shows unprefixed syntax is safe for every browser most sites still target.

One more: transparency behaves differently than beginners expect. Fading to transparent in some browsers passes through gray at the midpoint, because transparent is really rgba(0,0,0,0) and the alpha interpolation drags black in. The fix is to fade to a fully transparent version of your actual color, like rgba(236,72,153,0), which the gradient transparency guide explains in full. Contrary to a common assumption, transparent is not a neutral color; it is transparent black.

Related Tools & Further Reading

Each linear gradient technique below has a fuller treatment, and the generator turns any of them into copy-paste code. Start with the pattern you need, then follow the links when a plain background is not enough.

• CSS Gradients Explained: Linear, Radial, and How to Use Them
• CSS Radial Gradient: Complete Guide with Examples
• CSS Gradient Transparency: Alpha Channels and Fade Effects
• Reference: MDN linear-gradient() and the CSS Images Module Level 4 spec.
• Tools: build and export any fade with ToolSura's CSS gradient generator.