CSS3 Gradients

What is Gradients?

                           Gradients displays the combination of two or more colors.

Types of gradients

Linear Gradients

Radial Gradients

Linear gradients :

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

Top to bottom(“example”)

<html>

   <head>

      <style>

         #grad1 {

            height: 100px;

            background: -webkit-linear-gradient(pink,green);

            background: -o-linear-gradient(pink,green);

            background: -moz-linear-gradient(pink,green);

            background: linear-gradient(pink,green);

         }

      </style>

   </head>

   <body>

      <div id = “grad1”></div>

   </body>

</html>

Left to right(“example”)

<html>

   <head>

      <style>

         #grad1 {

            height: 100px;

            background: -webkit-linear-gradient(left, red , blue);

            background: -o-linear-gradient(right, red, blue);

            background: -moz-linear-gradient(right, red, blue);

            background: linear-gradient(to right, red , blue);

         }

      </style>

   </head>

   <body>

      <div id = “grad1”></div>

   </body>

</html>

Diagonal(“example”)

                    Diagonal starts at top left and right button.

<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>

Multi color(“example”)

<html>

   <head>

      <style>

         #grad2 {

            height: 100px;

            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);

            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);

            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);

            background: linear-gradient(red, orange, yellow, red, blue, green,pink);

         }

      </style>

   </head>

   <body>

      <div id = “grad2”></div>

   </body>

</html>

CSS3 Radial Gradients(“example”):

To create a radial gradient, you must define at least two color stops.

The radial gradient is defined by its center.

<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>

CSS3 Repeat Radial Gradients(“example”)

<html>

   <head>

      <style>

         #grad1 {

            height: 100px;

            width: 550px;

            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);

            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);

            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);

            background: repeating-radial-gradient(blue, yellow 10%, green 15%);

         }

      </style>

   </head>

   <body>

      <div id = “grad1”></div>

   </body>

</html>

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *