Gradien di CSS berfungsi untuk menampilkan transisi yang mulus antara dua atau lebih dari warna yang ditentukan ditentukan.
CSS mendefinisikan dua jenis gradien:
- Linear Gradients (turun / atas / kiri / kanan / diagonal)
- Radial Gradien (ditentukan oleh pusatnya)
Section Artikel
Gradien Linear CSS
Untuk membuat gradien linier, kita harus menentukan setidaknya dua warna berhenti. Penghentian warna adalah warna yang kita inginkan untuk membuat transisi yang mulus, kita juga bisa mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.
Sintaksis
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Arah – Atas ke Bawah (default)
Contoh berikut menunjukkan gradien linier yang dimulai dari atas. Mulai merah, beralih ke kuning:
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 200px; background-color: red; /* For browsers that do not support gradients */ background-image: linear-gradient(red, yellow); } </style> </head> <body> <h1>Linear Gradient - Top to Bottom</h1> <p> berikut ini menunjukkan gradien linier yang dimulai dari atas. Mulai merah, beralih ke kuning:</p> <div id="grad1"></div> </body> </html>
Arah – Kiri ke Kanan
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Mulai merah, beralih ke kuning:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<p>berikut ini menunjukkan gradien linier yang dimulai dari kiri. Mulai merah, beralih ke kuning:</p>
<div id="grad1"></div>
</body>
</html>
Arah – Diagonal
Kita bisa membuat gradien secara diagonal dengan menentukan posisi awal horizontal dan vertikal.
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri atas (dan mengarah ke kanan bawah). Mulai merah, beralih ke kuning:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Diagonal</h1>
<p>berikut ini menunjukkan gradien linier yang dimulai dari kiri atas (dan mengarah ke kanan bawah). Mulai merah, beralih ke kuning:</p>
<div id="grad1"></div>
</body>
</html>
Menggunakan Angles
Jika kita ingin lebih mengontrol arah gradien, kita bisa menentukan sudut, daripada arah yang telah ditentukan sebelumnya (ke bawah, ke atas, ke kanan, ke kiri, ke kanan bawah, dll.). Nilai 0deg setara dengan “to top”. Nilai 90deg setara dengan “ke right”. Nilai 180deg setara dengan “to bottom”.
Sintaksis
background-image: linear-gradient (angle, color-stop1, color-stop2);
Contoh berikut menunjukkan cara menggunakan sudut pada gradien linier:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradients - Using Different Angles</h1>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
</body>
</html>
Menggunakan Multiple Color Stops
Contoh berikut menunjukkan gradien linier (dari atas ke bawah) dengan beberapa warna berhenti:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow, green);
}
#grad2 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
#grad3 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>
<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong>Penghentian warna diberi jarak secara merata saat tidak ada persen yang ditentukan.</p>
<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>
<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>
<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>
</body>
</html>
Contoh berikut menunjukkan cara membuat gradien linier (dari kiri ke kanan) dengan warna pelangi dan beberapa teks:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 55px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>
</body>
</html>
Menggunakan Transparansi
Gradien CSS juga mendukung transparansi yang dapat digunakan untuk membuat efek memudar.
Untuk menambahkan transparansi, kita coba gunakan fungsi rgba () untuk menentukan penghentian warna. Parameter terakhir dalam fungsi rgba () dapat berupa nilai dari 0 hingga 1 dan ini menentukan transparansi warna: 0 menunjukkan transparansi penuh, 1 menunjukkan warna penuh (tanpa transparansi).
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Ini mulai sepenuhnya transparan, beralih ke warna merah penuh:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h1>Linear Gradient - Transparency</h1>
<p>Untuk menambahkan transparansi, kita coba gunakan fungsi rgba () untuk menentukan penghentian warna. Parameter terakhir dalam fungsi rgba () dapat berupa nilai dari 0 hingga 1 dan ini menentukan transparansi warna: 0 menunjukkan transparansi penuh, 1 menunjukkan warna penuh (tanpa transparansi)..</p>
<div id="grad1"></div>
</body>
</html>
Mengulangi gradien linier
Fungsi repeating-linear-gradient() digunakan untuk mengulangi gradien linier:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#grad2 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}
#grad3 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}
#grad4 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}
</style>
</head>
<body>
<h1>Repeating Linear Gradient</h1>
<div id="grad1"></div>
<p>Gradien berulang pada kapak 45 derajat mulai merah dan hijau akhir:</p>
<div id="grad2"></div>
<p>Gradien berulang pada kapak 190 derajat mulai merah dan hijau akhir:</p>
<div id="grad3"></div>
<p>Gradien berulang pada kapak 90 derajat mulai merah dan hijau akhir:</p>
<div id="grad4"></div>
</body>
</html>
