Gradients

Part of the CSS Mastery section of Coddy's HTML journey — lesson 21 of 43.

Gradients in CSS allow you to create smooth transitions between two or more colors.

Let's start with a simple linear gradient:

/* Create a linear gradient from top to bottom */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

This creates a gradient that transitions from orange (#ff9966) at the top to a reddish color (#ff5e62) at the bottom.

You can also specify the direction and use multiple colors like in the following example:

/* Create a linear gradient from left to right */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a CSS rule for a class named sunset-gradient that applies a linear gradient background. The gradient should:

Go from top to bottom
Start with the color #FFD700 (gold)
Transition to #FF4500 (orangered)

Cheat sheet

CSS gradients create smooth transitions between colors using the linear-gradient() function:

/* Basic linear gradient from top to bottom */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

/* Linear gradient with direction and multiple colors */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Common directions include to bottom, to right, to left, and to top.

Try it yourself

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.