Selain warna yang polos, kita juga bisa memberikan warna berupa "gradien" atau campuran gradasi beberapa warna. Gradien tersebut bisa berupa gradien linear atau gradien radial. Gradien dianggap sebagai background-image, dan bukan background-color. Selain itu, tiap warna dalam gradien diletakkan dalam kurung dan dipisahkan dengan tanda koma(,).
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
color:lime;
}
#styleku{
background-image : linear-gradient(#FF00FF, white);
}
.styleku{
background-image : radial-gradient(blue, #000000);
}
</style>
</HEAD>
<BODY>
<H2>Jenis huruf</H2>
<div id="styleku">
<p>
Ini adalah paragraf 1.
</p>
<p>
Ini adalah paragraf 2.
</p>
</div>
<div class="styleku">
<p>
Ini adalah paragraf 3.
</p>
<p>
Ini adalah paragraf 4.
</p>
</div>
</BODY>
</HTML>
Hati-hati saat memilih warna huruf yang latar belakangnya menggunakan gradien. Warna yang tidak tepat bisa membuat tulisan kalian tidak terlihat.
Bentuk Gradient
Masing-masing warna dalam gradient bisa ditampilkan dengan presentase tertentu. Kita bisa menggunakan banyak warna yang berbeda sesuai kemauan kita. Selain itu, untuk radial gradient kita bisa menentukan apakah bentuknya ellipse atau circle.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
#styleku{
background-image : linear-gradient(#FF00FF 20%, yellow 25%, green 55%);
}
.styleku{
background-image : radial-gradient(ellipse, blue 30%, #00FFFF 40%);
}
</style>
</HEAD>
<BODY>
<H2>Jenis huruf</H2>
<div id="styleku">
<p>
Ini adalah paragraf 1.
</p>
<p>
Ini adalah paragraf 2.
</p>
</div>
<div class="styleku">
<p>
Ini adalah paragraf 3.
</p>
<p>
Ini adalah paragraf 4.
</p>
</div>
</BODY>
</HTML>
Perubahan Arah dan Kemiringan
Ada satu hal lagi yang bisa kita terapkan dalam gradient, yaitu perubahan arah yang mungkin juga ditentukan berdasarkan derajat kemiringannya.
Pada contoh di atas ada to left yang menunjukkan arah gradient. to left bisa digantikan dengan to right, to top, to bottom, to bottom right, to bottom left, to top left dan to top right untuk memberikan arah gradient yang berbeda. Untuk mengetahui hasilnya silakan coba simpan dan jalankan sendiri
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
#styleku{
background-image : linear-gradient(90deg, #FF00FF 20%, yellow 25%, green 55%);
}
.styleku{
background-image : linear-gradient(-90deg, #FF00FF 20%, yellow 25%, green 55%);
}
</style>
</HEAD>
<BODY>
<H2>Jenis huruf</H2>
<div id="styleku">
<p>
Ini adalah paragraf 1.
</p>
<p>
Ini adalah paragraf 2.
</p>
</div>
<div class="styleku">
<p>
Ini adalah paragraf 3.
</p>
<p>
Ini adalah paragraf 4.
</p>
</div>
</BODY>
</HTML>
Perulangan Pola Gradient
Kalau terlalu banyak pola gradient yang diulang, kita bisa juga menggunakan properti repeating-linear-gradient dan repeating-radial-gradient. Berikut ini adalah contohnya.<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
#styleku{
background-image : repeating-linear-gradient(to left, #FF00FF 20%, yellow 25%);
}
.styleku{
background-image : repeating-radial-gradient(#FF00FF 20%, yellow 25%);
}
</style>
</HEAD>
<BODY>
<H2>Jenis huruf</H2>
<div id="styleku">
<p>
Ini adalah paragraf 1.
</p>
<p>
Ini adalah paragraf 2.
</p>
</div>
<div class="styleku">
<p>
Ini adalah paragraf 3.
</p>
<p>
Ini adalah paragraf 4.
</p>
</div>
</BODY>
</HTML>