CSS Gradients: Linear Gradients Explained

If you’ve ever seen a website background fade smoothly from one color to another, you’ve seen a CSS gradient in action.

In this article, you’ll learn how to create linear gradients using CSS, step by step. We’ll start from the very basics, write real code, and build your skills with a few simple examples you can try right away.

By the end, you’ll know how to:

Add a gradient background to any element
Control the direction of your gradient
Use multiple colors
Create more polished, modern-looking designs

No previous coding experience? That’s okay. We’ll go slowly and explain every piece.

What is a CSS Linear Gradient?

A gradient is a smooth blend from one color to another.

A linear gradient is a gradient that goes in a straight line. That line could be top to bottom, left to right, or at any angle you choose.

In CSS, we usually use gradients as backgrounds. You can apply them to the whole page or just one box, button, or section.

Here’s the basic idea in CSS:

background: linear-gradient(direction, color1, color2);

linear-gradient is the function that creates the gradient
direction tells the browser which way the gradient should go
color1 and color2 are the colors you want to blend between

We’ll break all of that down next.

Getting Set Up (So You Can See the Gradient)

To try these examples, you only need a text editor (like Notepad, VS Code, or any basic code editor) and a web browser (Chrome, Firefox, etc.).

Create a new file called gradient-demo.html.
Copy the following basic HTML into it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>CSS Linear Gradient Demo</title>
  <style>
    body {
      margin: 0;           /* Remove default margin */
      min-height: 100vh;   /* Make body at least full viewport height */
    }
  </style>
</head>
<body>
  <h1>My Gradient Page</h1>
</body>
</html>

Save the file.
Open it in your browser by double-clicking it.

You should see a white page with a heading. Now we’re ready to add gradients.

Example 1: Your First Top-to-Bottom Gradient

Let’s create a simple gradient that goes from blue at the top to white at the bottom.

Update the CSS inside the <style> tag like this:

body {
  margin: 0;
  min-height: 100vh;

  /* Add a linear gradient background */
  background: linear-gradient(blue, white);
}

What this does

We kept margin: 0; and min-height: 100vh; so the body fills the screen.
background: linear-gradient(blue, white); tells the browser:
- Use a linear gradient
- Start with blue at the top
- Blend smoothly into white at the bottom

By default, if you don’t specify a direction, the gradient goes from top to bottom.

Expected result: Your page background should now fade from blue at the top to white at the bottom.

Try it yourself

Change the colors to other named colors or hex codes, for example:

background: linear-gradient(red, yellow);

background: linear-gradient(#ff7f50, #1e90ff);

See how the feel of the page changes instantly.

Example 2: Controlling Gradient Direction

You’re not limited to top-to-bottom gradients. You can control the direction in a few ways.

Using simple keywords

Replace your body CSS with this:

body {
  margin: 0;
  min-height: 100vh;

  /* Left-to-right gradient */
  background: linear-gradient(to right, #ff7f50, #1e90ff);
}

Here’s what changed:

to right tells the gradient to go from left to right.
#ff7f50 (a coral color) starts on the left.
#1e90ff (a dodger blue) ends on the right.

Some useful keyword directions:

to bottom – top to bottom (default)
to top – bottom to top
to right – left to right
to left – right to left
to bottom right – from top-left to bottom-right corner
to top left – from bottom-right to top-left

Using angles

You can also use angles like 45deg or 90deg:

body {
  margin: 0;
  min-height: 100vh;

  /* 45-degree diagonal gradient */
  background: linear-gradient(45deg, #ff7f50, #1e90ff);
}

45deg means the gradient line is at a 45-degree angle.
At 0 degrees, the gradient goes from bottom to top.
At 90 degrees, it goes from left to right.

Try it yourself

Play with these variations:

linear-gradient(90deg, red, blue);
linear-gradient(180deg, green, white);
linear-gradient(to bottom right, purple, pink);

Notice how direction changes the mood and focus of the page.

Example 3: Using Three or More Colors

Gradients don’t have to stop at two colors. You can blend three or more.

Let’s create a fun sunset-style gradient.

Update your body CSS:

body {
  margin: 0;
  min-height: 100vh;

  /* Sunset gradient with three colors */
  background: linear-gradient(
    to bottom,
    #ff7e5f,  /* soft orange */
    #feb47b,  /* lighter orange */
    #ffffff   /* white at the bottom */
  );
}

What’s happening:

The gradient flows top to bottom.
It starts with #ff7e5f (soft orange).
Blends into #feb47b (lighter orange).
Then fades into white at the bottom.

You can add even more colors by separating them with commas. The browser will blend them smoothly.

Try it yourself

Experiment by adding a fourth color in the middle:

background: linear-gradient(
  to bottom,
  #ff7e5f,
  #feb47b,
  #fdd9e5,  /* light pink */
  #ffffff
);

Adjust colors and see how the gradient changes. This is a great way to build your color sense.

Example 4: Gradients on a Box (Not the Whole Page)

So far, we’ve applied gradients to the body, which affects the whole page. But you can use gradients on any element, like a box or button.

Let’s create a small gradient card in the middle of the screen.

Replace everything inside the <body> with this:

<body>
  <div class="card">
    <h1>Welcome!</h1>
    <p>This card has a gradient background.</p>
  </div>
</body>

Now update your <style> tag to include styles for body and .card:

body {
  margin: 0;
  min-height: 100vh;

  /* Center content horizontally and vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;  /* light gray page background */
}

.card {
  /* Size and padding for the card */
  width: 300px;
  padding: 20px;
  border-radius: 10px;  /* rounded corners */
  color: white;         /* white text for contrast */

  /* Apply a gradient just to the card */
  background: linear-gradient(to right, #36d1dc, #5b86e5);

  /* Add a soft shadow */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

What this does:

The body is now a flex container that centers the .card in the middle of the screen.
.card is a box with padding, rounded corners, and a left-to-right gradient from teal (#36d1dc) to blue (#5b86e5).
The white text makes it easy to read on the colorful background.

Expected result: A centered card with a smooth teal-to-blue gradient background and a soft drop shadow.

Try it yourself

Change the gradient direction: to bottom or 135deg
Try new color combinations (search for "CSS gradient palettes" for inspiration)
Adjust border-radius to see how rounded corners affect the look

Each small experiment builds your comfort with CSS.

Bonus: Controlling Where Colors Meet (Color Stops)

You can tell the browser where each color should be strongest by adding percentages.

Example:

background: linear-gradient(
  to bottom,
  #ff7e5f 0%,    /* start at top */
  #feb47b 50%,   /* middle */
  #ffffff 100%   /* bottom */
);

0% means the very top of the element
50% is the middle
100% is the bottom

This gives you more control over how fast or slow colors blend.

Try changing the middle color to 30% or 70% and see how it moves.

Quick Recap & What’s Next

You’ve just learned the foundations of CSS linear gradients. Here are the key takeaways:

Use linear-gradient in the background property to create gradients.
Without a direction, gradients go top to bottom by default.
You can control direction with keywords like to right or angles like 45deg.
Gradients can use two or more colors for richer effects.
You can apply gradients to any element, not just the page background.
Color stops (like 50%) give you fine control over where colors meet.

If you’ve followed along and tried the examples, you’ve already taken real steps into the world of CSS.

Next steps you can explore:

Play with more color combinations and directions
Create gradient buttons for a simple website header
Look up "radial gradients" to see another type of CSS gradient

Keep experimenting. Every small change you make teaches you something new. You’re not just copying code—you’re learning how to design with color and code together.

Mudzinga

CSS Gradients: Linear Gradients Explained

What is a CSS Linear Gradient?

Getting Set Up (So You Can See the Gradient)

Example 1: Your First Top-to-Bottom Gradient

What this does

Try it yourself

Example 2: Controlling Gradient Direction

Using simple keywords

Using angles

Try it yourself

Example 3: Using Three or More Colors

Try it yourself

Example 4: Gradients on a Box (Not the Whole Page)

Try it yourself

Bonus: Controlling Where Colors Meet (Color Stops)

Quick Recap & What’s Next

About Percy Mudzinga

Related Articles

CSS Gradients: Linear Gradients Explained

What is a CSS Linear Gradient?

Getting Set Up (So You Can See the Gradient)

Example 1: Your First Top-to-Bottom Gradient

What this does

Try it yourself

Example 2: Controlling Gradient Direction

Using simple keywords

Using angles

Try it yourself

Example 3: Using Three or More Colors

Try it yourself

Example 4: Gradients on a Box (Not the Whole Page)

Try it yourself

Bonus: Controlling Where Colors Meet (Color Stops)

Quick Recap & What’s Next

About Percy Mudzinga

Related Articles

Never Miss an Update