Cara membuat Gradient Backgrounds dengan Css3

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam

dengan css kita bisa mendesign seperti di photoshop, berikut contoh contoh untuk gradient background :

 

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

}

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

}

  

  

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

}

 

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

}

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

}

  

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

}

  

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

}

 

.square-linear2

{

    width:100px;

    height:100px;

    background: -ms-repeating-radial-gradient(red, red 10px, black 10px,black 20px);

}

 Ok, semoga bermanfaat
seleamat mencoba!!