Types of Gradients in CSS

CSSWeb DevelopmentFront End Technology

Gradients display the combination of two or more colors.

The following are the types of gradients:

Types of gradients

  • Linear Gradients(down/up/left/right/diagonally)
  • Radial Gradients

Example

Let us see an example of radial gradients:

Live Demo

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
            background: -o-radial-gradient(red 5%, green 15%, pink 60%);
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
            background: radial-gradient(red 5%, green 15%, pink 60%);
         }
      </style>
   </head>
   <body>
      <div id = "grad1"></div>
   </body>
</html>
raja
Published on 02-May-2018 14:29:24
Advertisements