CSS Gradient

Pengertian gradient

Di halaman ini

1. Apa itu Gradient ?

Pengertian gradient

gradient adalah perpaduan dua warna atau lebih yang menciptakan pembauran halus pada pertemuan kedua warna tersebut yang .

gradient terbagi menjadi 3 jenis :

Linear Gradient :arah susunan warna (atas/bawah/kiri/kanan/diagonal)
Radial Gradient :susunan warna terpusat ditengah elemen.
Conic Gradient :susunan warna melingkar.

Linear Gradient

<div class='linear1'>linear gradient</div>
<div class='linear2'>linear gradient</div>
<div class='linear3'>linear gradient</div>
<div class='linear4'>repeating linear gradient</div>
<style>
div { color: white; padding:10px; height:100px;
border: 1px groove darkblue; text-align: center;}
}
.linear1 {background: linear-gradient(blue,orange);}
.linear2 {
background: linear-gradient(blue,yellow,orange);}
.linear3 {
background: linear-gradient(to right,blue,green,yellow,orange);
}
.linear4 {
background: repeating-linear-gradient(red,black,gold);
}
</style>

linear gradient

linear gradient

linear gradient

repeating linear gradient

Radial Gradient

<div class='radial1'>radial gradient</div>
<div class='radial2'>radial gradient</div>
<div class='radial3'>radial gradient</div>
<div class='radial4'>repeating radial gradient</div>
<style>
div { color: white; padding:10px; width:100px; height:100px;
      border: 1px groove darkblue; text-align: center;}
.radial1 {background: radial-gradient(green,yellow);}
.radial2 {
background: radial-gradient(green 15%,yellow 25%,brown 50%);
}
.radial3 {
background: radial-gradient(circle,green,yellow,brown);
}
.radial4 {
background: repeating-radial-gradient(green,yellow 10%,brown 25%);
}
</style>

radial gradient

radial gradient

radial gradient

repeating radial gradient

Conic Gradient

<div class='conic1'>conic gradient</div>
<div class='conic2'>conic gradient</div>
<div class='conic3'>conic gradient</div>
<style>
div { color: white; padding:10px; width:100px; height:100px;
      border: 1px groove darkblue; text-align: center;}
.conic1 {background: conic-gradient(red,yellow);}
.conic2 {background: conic-gradient(red,white,orange,yellow);}
.conic3 {
background: conic-gradient(red 45deg,white 90deg,yellow 180deg,green 210deg););
border-radius: 50%;
}
.conic4 {background: conic-gradient(red 0deg,red 90deg,orange 90deg,orange 180deg,green 180deg, green 270deg, yellow 270deg);
border-radius: 50%;
}
</style>

conic gradient

conic gradient

conic gradient

conic gradient