HTML & CSS

Create a CSS Linear Gradient with Angles and Color Stops

Create a linear gradient from two colors, choose an exact direction, position a middle stop, and make a hard boundary while preserving a usable fallback color.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Start with two colors and a direction

To create a linear gradient in CSS, assign linear-gradient(direction, first-color, second-color) to background-image. A direction is optional, but writing it explicitly makes a tutorial example easier to inspect. The gradient needs at least two color stops, and its painted area comes from the element receiving the background.

Here is a complete banner using a blue-to-purple gradient. The solid background-color remains available if the image declaration is unsupported or removed. Padding supplies space around the text, and the border-box sizing rule keeps that padding inside the banner’s available width.

<section class="linear-banner">
  <h2>A blue-to-purple background</h2>
  <p>The first color starts on the left.</p>
</section>

.linear-banner {
  box-sizing: border-box;
  max-width: 48rem;
  margin: 1rem auto;
  padding: 2rem;
  color: #ffffff;
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #581c87);
}

Choose the angle according to the intended endpoint

In standard CSS, ninety degrees points right, so the first color starts on the left. One hundred eighty degrees points down, placing the first color at the top. Zero degrees points up. These values describe the gradient line’s direction, not a rotation applied to the element or to its text.

The keyword form linear-gradient(to right, ...) expresses the same basic horizontal direction as ninety degrees. A corner form such as to bottom right relates to the box’s shape; do not assume every keyword diagonal is interchangeable with a fixed angle in both wide and tall rectangles. Test the shape your actual component uses.

Place a third color deliberately

A third color can create an intermediate band or bend the blend toward a different hue. In this example, indigo is reached forty percent along the line. The first transition therefore occupies a shorter portion than the transition from indigo to purple. This is a controlled design choice rather than an evenly spaced default.

.linear-banner.three-stop {
  background-image: linear-gradient(90deg,
    #1e3a8a 0%,
    #3730a3 40%,
    #581c87 100%);
}

Add the three-stop class to the same banner to see the replacement. Keep percentage values in ascending order while learning the syntax, so the intended positions are easy to reason about. If you later use out-of-order stops intentionally, inspect how the browser fixes their positions instead of treating the source numbers as independent points.

Create a sharp boundary when a fade is unwanted

A linear gradient can also draw a two-color split. Put both colors at the same location, as in the fifty-percent example below. The first half remains blue, and the second half becomes purple immediately at the midpoint. No additional image file or pair of absolutely positioned elements is required.

.linear-banner.split {
  background-image: linear-gradient(90deg,
    #1e3a8a 50%,
    #581c87 50%);
}

Use this technique for decoration rather than as the only way to convey a category or status. If each half represents something meaningful, provide text labels as well. A background gradient does not create semantic regions that assistive technology can independently name.

Generate the initial two-color rule

In the CSS Gradient Generator, choose Linear, set the angle to 90, and enter #1e3a8a and #581c87. Copy its background declaration into the banner selector. The generated shorthand is valid, but this guide uses background-image separately to make the fallback color and image responsibilities easy to see.

The local tool does not expose a third stop or custom percentages. Add the three-stop or split declaration manually when that is the required design. Do not promise a multi-stop export merely because CSS itself supports one. The linear-gradient reference documents the broader syntax beyond the tool’s controls.

Check both geometry and readability

Test ninety and one hundred eighty degrees with the same colors, then compare the smooth, three-stop and split versions. Look at the edges and midpoint, not only a small thumbnail. Repeat at phone width so a diagonal or a long heading does not create an unexpected composition.

If the result is blank, first check whether you accidentally used background-color for the function, whether the element has visible height, and whether a later declaration wins in the cascade. Once it renders, check the text contrast at the brightest part behind each line. Correct gradient syntax is only the first part of a usable component.