CSS3 Diagonal Gradient

CSS Web Development Front End Technology

Diagonal starts at top left and right button. You can try to run the following code to implement diagonal gradients in CSS3 −

Live Demo

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue);
            background: -o-linear-gradient(bottom right, red, blue);
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue);
         }
      </style>
   </head>
   <body>
      <div id = "grad1"></div>
   </body>
</html>