Radial Gradient CSS, Linear dan Conic Gradient

Radial gradient

radial-gradient() memadukan warna ke arah luar dari sebuah titik tengah. Seperti setiap gradien CSS, radial gradient adalah gambar, jadi ditaruh di background-image (atau shorthand background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

Sintaks lengkapnya adalah radial-gradient(shape size at position, color stops). Semua yang ada sebelum warna-warnanya bersifat opsional.

Kata kunci ukuran menentukan di mana warna terakhir dicapai: di sisi terdekat kotak, di sudut terjauh, dan seterusnya. Ubah nilai-nilainya di sini dan lihat gradiennya digambar ulang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Coba circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a, dan circle 40px, #f59e0b 99%, transparent (titik dengan tepi tegas).

Linear gradient

linear-gradient() memadukan warna di sepanjang garis lurus. Tulis arah atau sudut lebih dulu, lalu warna-warnanya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Sudut dimulai dari 0deg yang menunjuk ke atas dan berputar searah jarum jam, jadi 90deg sama dengan to right dan 180deg adalah default to bottom. to right tetap bersifat fisik di halaman yang ditulis dari kanan ke kiri; balik sendiri arahnya jika gradien harus mengikuti arah baca.

Color stop dan hard stop

Setiap warna bisa punya posisi. Tanpa posisi, warna-warna diberi jarak yang sama rata. Saat dua warna berbagi posisi yang sama, perubahannya langsung, dan begitulah cara menggambar garis-garis, bendera, dan progress bar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Sebuah stop juga bisa menerima dua posisi, #111827 12px 24px, yang menggambar pita warna pekat dari 12px sampai 24px.

Conic gradient

conic-gradient() menyapukan warna di sekeliling titik tengah, seperti jarum jam. Dengan hard stop, gradien ini menggambar diagram pai tanpa gambar atau JavaScript apa pun:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

Diagram yang digambar dengan CSS tidak terlihat oleh pembaca layar, jadi tulis juga angka-angkanya dalam bentuk teks.

Teks gradien

Potong background gradien mengikuti bentuk huruf dan buat teksnya sendiri transparan:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Ingat untuk menyiapkan color biasa sebagai cadangan: jika pemotongannya gagal, teksnya hilang. Teks gradien juga punya kontras yang tidak merata, jadi pakai hanya untuk heading besar.

Gradien bisa ditumpuk dengan gambar dan gradien lain dalam satu daftar background-image; halaman background image membahas lapisan, ukuran, dan posisi.

Kesalahan umum

• background-color: linear-gradient(...). Gradien adalah gambar: pakai background-image atau background.
• Derajat ke arah yang salah. 0deg menunjuk ke atas, bukan ke kanan. 90deg mengarah ke kanan.
• Gradien pada elemen tanpa tinggi. Tidak ada yang tampil; beri konten atau ukuran.
• Warna tengah yang kusam. Memadukan dua warna pekat yang berseberangan, seperti merah dan hijau, melewati abu-abu kecokelatan di sRGB. Tambahkan stop di tengah, atau padukan di ruang warna lain: linear-gradient(in oklch, red, green).
• Banding pada gradien besar yang halus. Warna yang sangat mirip di area yang luas memperlihatkan undakan; kontras yang sedikit lebih besar antar-stop membantu.