CSS

Radial Gradient CSS: Code dan Cara Membuatnya

Gradient Radial di CSS

Gradien radial ditentukan oleh pusatnya.

Untuk membuat gradien radial kita juga harus menentukan setidaknya dua warna berhenti.

Sintaksis

background-image: radial-gradient (ukuran bentuk pada posisi, warna-awal, …, warna-terakhir);


Secara default, bentuk adalah elips, ukuran sudut terjauh dan posisi di tengah

Radial Gradient – Evenly Spaced Color Stops (default)

Contoh berikut menunjukkan gradien radial dengan warna berhenti spasi merata:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */  background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

Radial Gradient –Differently Spaced Color Stops

Contoh berikut menunjukkan gradien radial dengan warna berhenti spasi berbeda:

Result Size: 521 x 490
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>
​
<h1>Radial Gradient - Differently Spaced Color Stops</h1>
​
<div id="grad1"></div>
​
</body>
</html>
​

Mengatur Bentuk

Parameter bentuk menentukan bentuk. Paramenter bentuk ini bisa membuat nilai lingkaran atau elips. Nilai defaultnya adalah elips.

Contoh berikut memperlihatkan gradien radial dengan bentuk lingkaran:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */  background-image: radial-gradient(red, yellow, green);
}

#grad2 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */  background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Shapes</h1>

<h2>Ellipse (this is default):</h2>
<div id="grad1"></div>

<h2><strong>Circle:</strong></h2>
<div id="grad2"></div>

</body>
</html>

Penggunaan Kata Kunci Ukuran Berbeda

Parameter ukuran menentukan ukuran gradien. Ini dapat mengambil empat nilai:

  • sisi terdekat(closest side)
  • sisi terjauh(farthest side)
  • sudut terdekat(closest-corner)
  • sudut terjauh(farthest-corner)

Contoh

Gradien radial dengan kata kunci ukuran berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>

<h1>Radial Gradients - Different size keywords</h1>

<h2>closest-side:</h2>
<div id="grad1"></div>

<h2>farthest-side:</h2>
<div id="grad2"></div>

<h2>closest-corner:</h2>
<div id="grad3"></div>

<h2>farthest-corner (default):</h2>
<div id="grad4"></div>

</body>
</html>

Mengulangi gradien radial

Fungsi repeating-radial-gradient() digunakan untuk mengulangi gradien radial:

Contoh
Gradien radial yang berulang:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>Repeating Radial Gradient</h1>

<div id="grad1"></div>

</body>
</html>

Properti CSS Gradient

PropertyDeskripsi
background-imageMenetapkan satu atau lebih gambar latar belakang untuk sebuah elemen

Hanifah Nurbaeti

Share
Tags: CSS