Press "Enter" to skip to content

Gradient Examples in CSS

Last updated on October 5, 2019

Linear gradient :

This is the gradient which displays combined the colors in a fadeout passion.

Program 1 :

<html>

     <style type=”text/css”>

                     #Second

                                 {

                                   color: red;

                                   width: 100px;

                                   height: 100px;

                                   background-color: green;

                                   background-image: linear-gradient(cyan,white,red);

                                  }

                </style>

                <body>

                     <center> <p id=”Second”> HI </p> </center>

                </body>

</html>

Program 2 :

<html>

     <style type=”text/css”>

                     #Second

                                 {

                                   color: red;

                                   width: 100px;

                                   height: 100px;

                                   background-color: green;

                                   background-image: linear-gradient(to right,cyan,white,red);

                                  }

                </style>

                <body>

                     <center> <p id=”Second”> HI </p> </center>

                </body>

</html>

Program 3 :

Rotate with the image color in degreeā€™s manner.

<html>

     <style type=”text/css”>

                     #Second

                                 {

                                   color: red;

                                   width: 100px;

                                   height: 100px;

                                   background-color: green;

                                   background-image: linear-gradient(110deg,cyan,white,red);

                                  }

                </style>

                <body>

                     <center> <p id=”Second”> HI </p> </center>

                </body>

</html>

Program 4 :

Display the particular color to fix the particular percentage.

<html>

     <style type=”text/css”>

                     #Second

                                 {

                                   color: red;

                                   width: 100px;

                                   height: 100px;

                                   background-color: green;

                                   background-image: repeating-linear-gradient(cyan,white 10%,red 20%);

                                  }

                </style>

                <body>

                     <center> <p id=”Second”> HI </p> </center>

                </body>

</html>

Radial gradient:

Which is meant for displaying the features in radial fashion.

Program 1 :

<html>

     <style type=”text/css”>

                     #Second

                                 {

                                   width: 100px;

                                   height: 100px;

                                   background: radial-gradient(green,white,orange);

                                  }

                </style>

                <body>

                     <center> <p id=”Second”> HI </p> </center>

                </body>

</html>

Program 2 :

Radial gradient only we have providing the percentages.

<html>

     <style type=”text/css”>

                     #Second

                                 {

                                   width: 100px;

                                   height: 100px;

                                   background: radial-gradient(green 20%,white 30%,orange 50%);

                                  }

                </style>

                <body>

                     <center> <p id=”Second”> HI </p> </center>

                </body>

</html>

Program 3 :

This when we have to move the this corner to that and that to this moving.

<html>

     <style type=”text/css”>

                     #Second

                                 {

                                   width: 100px;

                                   height: 100px;

                                   background: radial-gradient(farthest-side at 20%,green,white,orange);

                                  }

                </style>

                <body>

                     <center> <p id=”Second”> HI </p> </center>

                </body>

</html>

Program 4 :

<html>

     <style type=”text/css”>

                     #Second

                                 {

                                   width: 100px;

                                   height: 100px;

                                   background: radial-gradient(closest-corner at 80%,green,white,orange);

                                  }

                </style>

                <body>

                     <center> <p id=”Second”> HI </p> </center>

                </body>

</html>

Program 5 :

<html>

     <style type=”text/css”>

                     #Second

                                 {

                                   width: 100px;

                                   height: 100px;

                                   background: repeating-radial-gradient(green,white 10%,orange 20%);

                                  }

                </style>

                <body>

                     <center> <p id=”Second”> HI </p> </center>

                </body>

</html>

Be First to Comment

    Leave a Reply

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