get it on google playCreated with Sketch.
CSS> Background linear-gradient()

Background linear-gradient()

We start with the background property and set it to the linear-gradient() function.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>The Martian</h1>
  <h3>A film by Ridley Scott</h3>
 </body>
body{ 
 background: linear-gradient();
 padding: 40px;
}

body {
 text-align: center;
}

To gradually change the background from top to bottom, place colors inside the parentheses. Try it with sandyBrown, saddleBrown.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>The Martian</h1>
  <h3>A film by Ridley Scott</h3>
 </body>
h1{ 
 background: linear-gradient(sandyBrown, saddleBrown);
 padding: 40px;
}

body {
 text-align: center;
}

We can add more colors to the mix by separating them with a comma ,.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>The Neptunian</h1>
  <h3>A film about the coldest planet in our solar system. Made by Scottly Riddle</h3>
 </body>
h1{ 
 background: linear-gradient(lightCyan, skyBlue, deepSkyBlue);
 padding: 40px;
}

body {
 text-align: center;
}

To rotate a gradient by 90 degrees, or from left to right, place 90deg before the colors.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Banana Ripeness Indicator</h1>
  <p>Good</p>
 </body>
p {
 background: linear-gradient(90deg, yellow, lightGreen);
 padding: 40px 40px 40px 0;
 filter: saturate(75%);
}

h1 {
 text-align: center;
}

The direction of a gradient goes clockwise from 0 to 360. Try rotating the gradient to a diagonal position with 45deg.

<head>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1>Solar Flares & Auroras</h1>
 <p>The biggest solar flare ever recorded happened on Monday, April 2, 2001.</p>
</body>

h1 {
 background: linear-gradient(45deg, blue, lightGreen);
 padding: 40px;
 color: white;
 text-align: center;
}
TRY IT ON THE APP