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

Gradient and Radial Color in CSS


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 4419  View(s)
Rate this:

Gradient and Radial Color in CSS

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

}

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick