CSS linear-gradient() Function

The CSS linear-gradient() function creates an image containing a smooth transition between two or more colors along a straight line.

It is commonly used for backgrounds, buttons, overlays, and decorative effects. Developers can control the gradient's direction, angle, color stops, transparency, and color interpolation without using an external image file.

Syntax

linear-gradient(color1, color2)
linear-gradient(direction, color1, color2)
linear-gradient(angle, color1, color2)
linear-gradient(direction, color1 position, color2 position)
linear-gradient(in color-space, color1, color2)

The function requires at least two color stops. Direction, angle, color-stop positions, and interpolation settings are optional.

For example:

.box {
  background-image: linear-gradient(#0066cc, #80bfff);
}

This creates a vertical gradient from dark blue at the top to light blue at the bottom.

Additional examples:

background: linear-gradient(red, blue);
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, blue);
background: linear-gradient(to bottom right, red, blue);
background: linear-gradient(red 0%, yellow 50%, blue 100%);
background: linear-gradient(90deg, red 0 50%, blue 50% 100%);
background: linear-gradient(in oklab, red, blue);
background: linear-gradient(90deg in hsl longer hue, red, blue);

The linear-gradient() function returns a CSS <image> value, not a <color> value.

It can be used with properties such as background-image, background, and border-image-source, but not background-color.

Parameters

The linear-gradient() function accepts an optional direction or angle, optional interpolation settings, and a list of color stops.

Parameter	Description	Required
`direction`	Specifies the destination side or corner using the `to` keyword.	No
`angle`	Specifies the direction of the gradient using an angle.	No
`color`	Specifies a color stop. At least two are required.	Yes
`position`	Specifies the location of a color stop using a length or percentage.	No
`color-space`	Specifies the color space used for interpolation.	No
`hue method`	Controls the hue interpolation path in a polar color space.	No

For example:

linear-gradient(90deg, #0066cc 0%, #80bfff 100%)

This defines a left-to-right gradient with two explicitly positioned color stops.

The first color stop begins at 0%, and the second reaches its full color at 100%.

How It Works

A linear gradient uses an imaginary line called the gradient line.

The browser places colors along this line and calculates intermediate colors between the specified stops.

For example:

.box {
  background: linear-gradient(to right, red, blue);
}

The gradient begins with red on the left and transitions toward blue on the right.

For a basic two-color gradient:

The browser determines the gradient direction.
It establishes the positions of the color stops.
It interpolates colors between adjacent stops.
It paints the resulting gradient image inside the element's background area.

Without an explicit direction, the gradient runs from top to bottom.

Without explicit stop positions, the first and last colors default to the beginning and end of the gradient, and intermediate stops are distributed evenly.

The gradient scales with its image area and does not require an external image resource.

Gradient Direction

The to keyword specifies the side or corner toward which the gradient progresses.

Direction	Result
`to bottom`	Top to bottom (default)
`to top`	Bottom to top
`to right`	Left to right
`to left`	Right to left
`to bottom right`	Upper-left region toward lower-right region
`to bottom left`	Upper-right region toward lower-left region
`to top right`	Lower-left region toward upper-right region
`to top left`	Lower-right region toward upper-left region

For example:

.horizontal {
  background: linear-gradient(to right, #0066cc, #80bfff);
}
.vertical {
  background: linear-gradient(to bottom, #0066cc, #80bfff);
}
.diagonal {
  background: linear-gradient(to bottom right, #0066cc, #80bfff);
}

The order of the side keywords does not matter. For example, to bottom right and to right bottom are equivalent.

Corner directions are calculated using the element's dimensions, so a diagonal gradient does not necessarily form a 45-degree angle.

Gradient Angles

An angle provides more precise control over the gradient's direction.

CSS gradient angles begin at the upward direction and increase clockwise.

Angle	Direction
`0deg`	Bottom to top
`90deg`	Left to right
`180deg`	Top to bottom
`270deg`	Right to left
`360deg`	Same direction as 0deg

For example:

.box {
  background: linear-gradient(45deg, red, blue);
}

This creates a gradient progressing at a 45-degree angle, from the lower-left toward the upper-right.

Other angle units are also supported:

linear-gradient(90deg, red, blue)
linear-gradient(0.25turn, red, blue)
linear-gradient(100grad, red, blue)
linear-gradient(1.5708rad, red, blue)

These examples specify approximately the same direction.

Negative angles rotate counterclockwise.

Color Stops

Color stops determine which colors appear along the gradient and where they appear.

For example:

.box {
  background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
}

This places red at the beginning, yellow halfway across, and blue at the end.

Color-stop positions can use percentages or lengths:

linear-gradient(to right, red 0%, blue 100%)
linear-gradient(to right, red 0px, blue 200px)

Percentage positions are relative to the gradient line, while lengths specify distances along that line.

For example:

linear-gradient(to right, red 20%, blue 80%)

The area before 20% remains red, and the area after 80% remains blue.

The transition occurs between the two specified positions.

Color stops are processed in order. A later stop whose specified position is before an earlier stop is moved forward to the preceding stop's position.

Multiple Colors

A linear gradient can contain more than two colors.

For example:

.box {
  background: linear-gradient(to right, red, orange, yellow, green, blue);
}

When no positions are specified, the intermediate stops are distributed evenly between the first and last colors.

Explicit positions provide more control:

.box {
  background: linear-gradient(
    to right,
    #0066cc 0%,
    #00aacc 25%,
    #28a745 60%,
    #ffcc00 100%
  );
}

Each color transition occurs between its neighboring stops.

Additional stops can create more detailed color transitions, including narrow bands and extended areas of similar colors.

Hard Color Transitions

Two different colors placed at the same stop position create a hard transition instead of a smooth blend.

For example:

.box {
  background: linear-gradient(to right, red 50%, blue 50%);
}

The left half is red and the right half is blue.

A color stop can also specify two positions:

.box {
  background: linear-gradient(
    to right,
    red 0% 30%,
    yellow 30% 65%,
    blue 65% 100%
  );
}

This produces three solid color bands.

The two-position syntax is equivalent to repeating each color at its starting and ending positions.

Hard transitions are useful for stripes, decorative bands, and geometric backgrounds.

Color Hints

A color hint changes where the midpoint of a transition occurs between two color stops.

For example:

.box {
  background: linear-gradient(to right, red, 30%, blue);
}

The midpoint color occurs at 30% of the gradient line instead of the default 50%.

A color hint is a length or percentage placed between two color stops without an associated color.

Another example:

.box {
  background: linear-gradient(to right, red 10%, 30%, blue 90%);
}

The transition begins at 10%, reaches its midpoint at 30%, and ends at 90%.

Color hints are useful when a transition should progress more quickly through one part of a gradient than another.

A hint must appear between color stops. It cannot replace a required color stop.

Transparency

Linear gradients can contain transparent or partially transparent colors.

For example:

.box {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 80%));
}

This creates a gradient from transparent black to mostly opaque black.

Another example uses the transparent keyword:

.box {
  background: linear-gradient(to bottom, transparent, #0066cc);
}

The transparent keyword represents fully transparent black. Modern gradient interpolation handles transparency using premultiplied alpha, helping avoid unwanted dark fringes.

Transparent gradients are commonly layered over images:

.hero {
  background-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 75%)), url("banner.jpg");
}

The first background image is drawn above the second, allowing the gradient to darken part of the underlying image.

Color Interpolation

Color interpolation determines how intermediate colors are calculated between gradient stops.

Modern CSS supports an explicit interpolation color space using the in keyword.

For example:

.box {
  background: linear-gradient(in oklab, red, blue);
}

This requests interpolation in the OKLab color space.

Other supported color spaces include:

linear-gradient(in srgb, red, blue)
linear-gradient(in srgb-linear, red, blue)
linear-gradient(in lab, red, blue)
linear-gradient(in lch, red, blue)
linear-gradient(in oklch, red, blue)
linear-gradient(in display-p3, red, blue)

Modern CSS specifications use OKLab as the default interpolation space when no interpolation method is supplied. Older implementations may use sRGB interpolation.

For polar color spaces such as HSL, LCH, and OKLCH, hue interpolation can also be controlled:

linear-gradient(in hsl shorter hue, red, blue)
linear-gradient(in hsl longer hue, red, blue)
linear-gradient(in oklch increasing hue, red, blue)
linear-gradient(in oklch decreasing hue, red, blue)

These methods control the path followed around the hue circle.

The interpolation method can be combined with a direction:

linear-gradient(90deg in oklab, red, blue)

Choosing an explicit color space is useful when consistent color transitions are important across browsers and displays.

Multiple Backgrounds

Multiple gradients can be combined using comma-separated background layers.

For example:

.box {
  background-image:
    linear-gradient(to right, rgb(0 102 204 / 50%), transparent),
    linear-gradient(to bottom, #ffffff, #dddddd);
}

The first gradient is drawn above the second.

Gradients can also be combined with images:

.hero {
  background-image:
    linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 75%)),
    url("banner.jpg");
  background-size: cover;
  background-position: center;
}

The transparent gradient overlays the background image.

The first background layer is always drawn on top of subsequent background layers.

Use transparent colors when lower layers should remain visible.

Background Size and Position

A linear gradient is a CSS image and can be controlled with background sizing and positioning properties.

For example:

.box {
  background-image: linear-gradient(to right, #0066cc, #80bfff);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

By default, a background gradient fills the available background image area.

A smaller background size can create decorative patterns:

.box {
  background-image: linear-gradient(to right, #0066cc 50%, #ffffff 50%);
  background-size: 40px 40px;
}

With the default repeating background behavior, the smaller gradient image tiles across the element.

Unlike a regular photograph, a CSS gradient has no intrinsic width, height, or aspect ratio.

Its rendered dimensions depend on the CSS image sizing rules and the area where it is used.

Repeating Gradients

The linear-gradient() function creates a single gradient image. To repeat the color-stop pattern along the gradient line, use repeating-linear-gradient().

For example:

.box {
  background: repeating-linear-gradient(
    to right,
    #0066cc 0 20px,
    #ffffff 20px 40px
  );
}

This produces alternating blue and white stripes.

The difference is:

Function	Behavior
`linear-gradient()`	Creates one gradient pattern across its image area.
`repeating-linear-gradient()`	Repeats its color-stop pattern along the gradient line.

Repeating a background image using background-repeat is different from repeating the color-stop sequence within the gradient itself.

Use repeating-linear-gradient() when the intended effect is a repeated stripe or color pattern.

Using Custom Properties

CSS custom properties can store gradient colors, directions, or complete gradient expressions.

For example:

:root {
  --gradient-start: #0066cc;
  --gradient-end: #80bfff;
}
.button {
  background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
}

The colors can be changed without rewriting the gradient declaration.

A complete gradient can also be stored:

:root {
  --brand-gradient: linear-gradient(135deg, #0066cc, #28a745);
}
.banner {
  background-image: var(--brand-gradient);
}

Custom properties make it easier to maintain consistent gradient designs across multiple elements.

They can also be used to create alternate themes and color combinations.

Example

This example demonstrates four common linear gradient directions.

HTML:

<div class="linear-gradient-demo">
  <div class="linear-gradient-demo-item">
    <div class="linear-gradient-demo-swatch linear-gradient-demo-bottom"></div>
    <span>to bottom</span>
  </div>
  <div class="linear-gradient-demo-item">
    <div class="linear-gradient-demo-swatch linear-gradient-demo-right"></div>
    <span>to right</span>
  </div>
  <div class="linear-gradient-demo-item">
    <div class="linear-gradient-demo-swatch linear-gradient-demo-diagonal"></div>
    <span>to bottom right</span>
  </div>
  <div class="linear-gradient-demo-item">
    <div class="linear-gradient-demo-swatch linear-gradient-demo-angle"></div>
    <span>45deg</span>
  </div>
</div>

CSS:

.linear-gradient-demo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}
.linear-gradient-demo-item {
  min-width: 0;
  text-align: center;
}
.linear-gradient-demo-swatch {
  height: 110px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
.linear-gradient-demo-item span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}
.linear-gradient-demo-bottom {
  background: linear-gradient(to bottom, #0066cc, #80bfff);
}
.linear-gradient-demo-right {
  background: linear-gradient(to right, #0066cc, #80bfff);
}
.linear-gradient-demo-diagonal {
  background: linear-gradient(to bottom right, #0066cc, #80bfff);
}
.linear-gradient-demo-angle {
  background: linear-gradient(45deg, #0066cc, #80bfff);
}

Browser Result

to bottom

to right

to bottom right

45deg

All four examples use the same colors. Only the gradient direction changes.

Overlay Example

This example demonstrates a transparent gradient overlay placed above a solid background color.

HTML:

<div class="linear-gradient-overlay-demo">
  <h3>Gradient Overlay</h3>
  <p>A transparent gradient creates a darker area behind the text.</p>
</div>

CSS:

.linear-gradient-overlay-demo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  padding: 25px;
  border-radius: 5px;
  background-color: #0066cc;
  background-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 75%));
  color: #ffffff;
}
.linear-gradient-overlay-demo h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 20px;
}
.linear-gradient-overlay-demo p {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
}

Browser Result

Gradient Overlay

A transparent gradient creates a darker area behind the text.

The gradient is transparent at the top and becomes darker toward the bottom, making the white text easier to read.

The same technique can be applied above a background image to improve text visibility.

Common Uses

The linear-gradient() function is useful for creating visual effects without external image files.

Use	Description
Page backgrounds	Create smooth transitions between background colors.
Buttons	Apply decorative color transitions to interactive elements.
Hero sections	Add color overlays to large content areas.
Image overlays	Improve text readability over photographs.
Decorative stripes	Create solid bands using adjacent color stops.
Multiple backgrounds	Combine gradients with other gradients or images.
Theme designs	Use custom properties to maintain reusable gradients.
Color transitions	Control the appearance of intermediate colors.

For example:

.button {
  background: linear-gradient(to right, #0066cc, #004499);
  color: #ffffff;
}

This creates a horizontal blue gradient suitable for a button background.

Limitations

The linear-gradient() function has several important rules and limitations.

It requires at least two color stops.
It returns an image value, not a color value.
It cannot be assigned directly to background-color.
Direction keywords require the to prefix.
Color stops are separated by commas.
Color-stop positions use lengths or percentages.
Color hints must appear between color stops.
A regular linear gradient does not automatically repeat its color-stop pattern.
Different interpolation color spaces can produce different intermediate colors.
Advanced interpolation syntax may require compatibility checks.
A gradient alone does not guarantee sufficient contrast for overlaid text.

For example, this is valid:

background-image: linear-gradient(to right, red, blue);

The following is invalid because it supplies only one color stop:

background-image: linear-gradient(red);

The following is invalid because the direction is missing the to keyword:

background-image: linear-gradient(right, red, blue);

The following is invalid because background-color does not accept image values:

background-color: linear-gradient(red, blue);

Use background or background-image when applying a gradient as a background.

Browser Support

The CSS linear-gradient() function is Baseline Widely available and has been supported across major browser engines for many years.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support standard linear gradients.

For example:

.box {
  background-image: linear-gradient(to right, #0066cc, #80bfff);
}

Newer features, including explicit color-space interpolation, have separate browser compatibility considerations.

A solid-color fallback can be provided before a gradient declaration:

.box {
  background-color: #0066cc;
  background-image: linear-gradient(to right, #0066cc, #80bfff);
}

If the browser does not support the gradient, the solid background color remains visible.

For current compatibility information, visit Can I Use? and search for CSS gradients.

Specifications

The linear-gradient() function is defined in the CSS Images Module Level 3 .

Additional color interpolation capabilities are defined in the CSS Images Module Level 4 .

Related CSS functions include repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), and conic-gradient().