freeCodeCamp Challenge Guide: Create a Gradual CSS Linear Gradient

Guide
1

Create a Gradual CSS Linear Gradient

Problem Explanation

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

The syntax is always:

background-image: linear-gradient(angle, color-stop1, color-stop2....);

The colors can be used in both hex() and rgb() formats. Experiment a bit and you’ll understand how easy and beautiful it is to use it.

Solutions

Solution 1 (Click to Show/Hide) 
<style>

  div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
    background-image: linear-gradient(35deg, #CCFFFF, #FFCCCC);
  }

</style>

<div></div>

Relevant Links

18 Likes