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);
}

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)

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>