Post
Ask Question

CSS Gradients

To create gradients, you can blend as many colors as you want. In simple words, you can show smooth transitions between two or more specified colors with CSS gradients.

Using this sample code,

background-image: linear-gradient(100deg, blue, orange, red);

Example of how I use it,

<!DOCTYPE html>
<html>
  <head>
    <style>
      #grad1 {
        height: 200px;
        background-color: red;
        /* For browsers that do not support gradients */
        background-image: linear-gradient(100deg, blue, orange, red);
      }
    </style>
  </head>
  <body>
    <h1>Linear Gradient - Diagonal</h1>
    <p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>
    <p>This tutorial is made by abhishek on c# corner:</p>
    <div id="grad1"></div>
  </body>
</html>

Output

CSS Gradients