articles

Home / DeveloperSection / Articles / Gradient and Radial Color in CSS

Gradient and Radial Color in CSS

Sumit Kesarwani7095 24-Jun-2013


Gradient and Radial Color in CSS

 .bubble
{
    width:300px;
    height:50px;
    background-color:Green;
    background-image: -webkit-gradient(linear, 0% 0%,0% 0%, from(Green), to(Yellow));
    background-image: -webkit-linear-gradient(top, Green, Yellow);
    background-image: -moz-linear-gradient(top, Green, Yellow);
    background-image: -ms-linear-gradient(top, Green, Yellow);
    background-image: -o-linear-gradient(top, Green, Yellow);
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}

 

Gradient and Radial Color in CSS

 .square
{
    width:200px;
    height:200px;
    background-color:Blue;
    background-image: -webkit-gradient(linear, -45% 0%,0% 0%, from(Green), to(Yellow));
    background-image: -webkit-linear-gradient(-45deg, Green, Yellow);
    background-image: -moz--linear-gradient(-45deg, Green, Yellow);
    background-image: -ms-linear-gradient(-45deg, Green, Yellow);
    background-image: -o-linear-gradient(-45deg, Green, Yellow);
}

 

Gradient and Radial Color in CSS

 .radial-center
{
    width:100px;
    height:100px;
    background-color:Red;
    background-position:center center;
    background-repeat:no-repeat;
    background: -moz-radial-gradient(circle,black,red);
    background: -webkit-gradient(radial, center center, 0, center center, 200, from(black), to(red));
    background: -webkit-radial-gradient(circle,black,red);
    background: -ms-radial-gradient(circle,black,red);
    background: -o-radial-gradient(circle,black,red);
}

 

Gradient and Radial Color in CSS

 .radial-closest
{
    width:200px;
    height:200px;
    background-color:#2F2727;
    background-repeat:no-repeat;
    background-image: -webkit-radial-gradient(50px 50px,circle closest-side,#1a82f7, #2F2727);
    background-image: -moz-radial-gradient(50px 50px,circle closest-side,#1a82f7, #2F2727);
    background-image: -ms-radial-gradient(50px 50px, circle closest-side,#1a82f7, #2F2727);
}

 

Gradient and Radial Color in CSS

 .radial-closest-corner
{
    width:200px;
    height:200px;
    background-color:#2F2727;
    background-repeat:no-repeat;
    background-image: -webkit-radial-gradient(50px 50px,circle closest-corner,#1a82f7, #2F2727);
    background-image: -moz-radial-gradient(50px 50px,circle closest-corner,#1a82f7, #2F2727);
    background-image: -ms-radial-gradient(50px 50px, circle closest-corner,#1a82f7, #2F2727);
}

 

Gradient and Radial Color in CSS

 .radial-farther-side
{
    width:200px;
    height:200px;
    background-color:#2F2727;
    background-repeat:no-repeat;
    background-image: -webkit-radial-gradient(50px 50px,circle farthest-side,#1a82f7, #2F2727);
    background-image: -moz-radial-gradient(50px 50px,circle farthest-side,#1a82f7, #2F2727);
    background-image: -ms-radial-gradient(50px 50px, circle farthest-side,#1a82f7, #2F2727);
}

 

Gradient and Radial Color in CSS

 .radial-farther-corner
{
    width:200px;
    height:200px;
    background-color:#2F2727;
    background-repeat:no-repeat;
    background-image: -webkit-radial-gradient(50px 50px,circle farthest-corner,#1a82f7, #2F2727);
    background-image: -moz-radial-gradient(50px 50px,circle farthest-corner,#1a82f7, #2F2727);
    background-image: -ms-radial-gradient(50px 50px, circle farthest-corner,#1a82f7, #2F2727);
}

 

Gradient and Radial Color in CSS

 .circle-radial
{
    width:100px;
    height:100px;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
     background-color:#2F2727;
    background-repeat:no-repeat;
    background-image: -webkit-radial-gradient(20px 20px, circle farthest-side,#1a82f7, #2F2727);
    background-image: -moz-radial-gradient(20px 20px, circle farthest-side,#1a82f7, #2F2727);
    background-image: -ms-radial-gradient(20px 20px, circle farthest-side,#1a82f7, #2F2727);
}

 

Gradient and Radial Color in CSS

 .circle-radial2
{
    width:100px;
    height:100px;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    background: -ms-repeating-radial-gradient(30% 40%, red ,red 10px, black 10px, black 20px);
}

 

Gradient and Radial Color in CSS

 .square-linear2
{
    width:100px;
    height:100px;
    background: -ms-repeating-radial-gradient(red, red 10px, black 10px,black 20px);
}
 

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By