Gradien

Gradien linear dan radial sebagai latar antarmuka.

Daftar isi

Topik ini membahas fungsi gradien CSS sebagai latar antarmuka, yaitu linear-gradient() untuk gradasi berarah dan radial-gradient() untuk gradasi yang menyebar dari satu titik. Pembahasan mencakup arah dan sudut, color stop beserta penempatannya, penerapan pada tombol, banner, dan overlay teks, serta penjagaan kontras ketika teks diletakkan di atas gradien. Setelah membacanya, latar bergradasi dapat disusun dengan nilai yang terkendali dan tetap ramah keterbacaan.

Gradien adalah gambar latar#

Fungsi gradien tidak menghasilkan warna, melainkan menghasilkan gambar yang mengisi area latar elemen. Karena itu gradien dituliskan pada properti background-image atau pada shorthand background, bukan pada properti color. Deklarasi color: linear-gradient(...) tidak valid dan diabaikan browser, dan penulisan yang keliru seperti ini sering menjadi kebingungan pertama. Di antara dua warna yang diberikan, browser menghitung transisi secara otomatis tanpa perlu menyebutkan warna antaranya.

Setiap fungsi gradien menerima daftar warna yang urutannya menentukan urutan gradasi. Warna pertama berada di awal jalur gradasi dan warna terakhir berada di ujungnya. Gradien dengan dua warna sama menghasilkan bidang polos, sehingga gradien yang berguna selalu memuat warna-warna yang berbeda atau posisi yang disengaja. Selain itu, area di luar jalur gradasi terisi warna pada tepi jalurnya, sehingga gradien selalu memenuhi seluruh latar tanpa ruang kosong.

linear-gradient: arah dan sudut#

Fungsi linear-gradient() merentangkan gradasi sepanjang sebuah garis lurus. Arah dapat dinyatakan dengan kata kunci seperti to right atau to top left, maupun dengan sudut seperti 45deg. Pada penulisan sudut, 0deg menunjuk ke atas dan nilainya bertambah searah jarum jam, sehingga 90deg menunjuk ke kanan. Kata kunci lebih mudah dibaca untuk arah umum, sedangkan sudut memberi kendali penuh untuk arah lainnya. Setiap gradien membutuhkan paling tidak dua warna, dan stop lanjutan dapat ditambahkan pada keduanya untuk mengatur letak pergantian warna secara lebih rinci.

css Contoh: arah dan sudut pada linear-gradient

.banner-kegiatan {
  background-image: linear-gradient(to right, #1d4ed8, #38bdf8);
}

.kelompok-piket {
  background-image: linear-gradient(45deg, #15803d, #86efac);
}

Kedua deklarasi di atas menghasilkan gradasi halus dari satu warna ke warna lainnya sepanjang elemen. Gradasi berarah semacam ini paling sering dipakai sebagai latar banner, tajuk halaman, dan blok pengantar karena arahnya yang sejajar dengan tata letak. Arah to bottom merupakan arah bawaan apabila tidak disebutkan, sehingga gradien tanpa arah selalu jatuh dari atas ke bawah.

Color stop dan penempatan persen#

Setiap warna pada daftar gradien disebut color stop, yaitu penanda posisi sebuah warna sepanjang jalur gradasi. Posisinya bersifat opsional, dan tanpa posisi warna-warna dibagikan rata di antara tetangganya. Dengan posisi, misalnya #0f172a 50%, warna ditegakkan tepat pada titik tersebut. Dua stop yang ditempatkan pada posisi yang sama menghasilkan batas tegas tanpa gradasi, dan pola ini digunakan untuk menyusun pita warna.

css Contoh: penempatan color stop dan batas tegas

.pita-dua-blok {
  background-image: linear-gradient(
    to bottom,
    #0f172a 0%,
    #0f172a 50%,
    #e2e8f0 50%,
    #e2e8f0 100%
  );
}

.status-lunas {
  background-image: linear-gradient(90deg, #16a34a 25%, #dc2626 25%);
}

Contoh pertama membagi elemen menjadi dua blok rata karena kedua pasangan stop berbagi posisi 50%. Contoh kedua membagi elemen menjadi pita hijau seperempat lebar dan pita merah tiga perempat lebar. Kedua hasil itu tidak menampilkan gradasi halus sama sekali, padahal dibuat dengan fungsi gradien, dan itulah kendali yang datang dari penempatan posisi.

radial-gradient: bentuk dan posisi#

Fungsi radial-gradient() menyebar dari satu titik pusat ke segala arah. Bentuknya berupa ellipse secara bawaan karena mengikuti proporsi elemen, dan circle memaksakan lingkaran dengan jari-jari yang sama ke semua arah. Pusatnya diatur dengan kata kunci at, misalnya at center atau at top left, dan posisi persen juga diterima. Ukuran penyebaran dapat dibatasi dengan kata kunci seperti closest-side, meskipun nilai bawaan farthest-corner sudah mencukupi untuk kebanyakan latar. Gradien radial ini cocok untuk sorotan halus, seperti cahaya di belakang judul atau latar kartu profil yang terasa berdimensi tanpa gambar sama sekali.

css Contoh: bentuk dan posisi pada radial-gradient

.lampu-pusat {
  background-image: radial-gradient(circle at center, #fde68a 0%, #f59e0b 45%, #7c2d12 100%);
}

.fokus-sudut {
  background-image: radial-gradient(ellipse at top left, #eff6ff 0%, #93c5fd 45%, #1d4ed8 100%);
}

Gradasi radial cocok untuk kesan cahaya, kedalaman, dan sorotan karena penyebarannya meniru sumber cahaya. Warna yang terang diletakkan di pusat dan warna yang gelap di tepi untuk efek cembung, atau sebaliknya untuk efek cekung. Pemindahan pusat dengan at mengubah arah sorotan tanpa menyentuh warna-warnanya.

Tombol dan banner mendapat manfaat gradien halus sebagai latar yang tidak datar, umumnya dengan dua warna palet yang berdekatan. Penerapan yang lebih teknis adalah overlay teks di atas gambar latar. Lapisan gradien gelap semi transparan diletakkan di atas gambar agar teks putih tetap terbaca, dan lapisan itu ditulis sebelum url() karena lapisan pertama pada daftar digambar paling atas.

css Contoh: overlay gradien agar teks tetap terbaca

.kartu-jadwal {
  background-image:
    linear-gradient(to top, rgb(0 0 0 / 0.65), transparent 55%),
    url("latar-jadwal.jpg"); /* berkas gambar milik proyek */
  color: #ffffff;
}

Gradien juga dapat bertumpuk lebih dari dua lapis dengan memisahkan setiap fungsi menggunakan koma. Demo berikut menampilkan enam panel berdampingan, yaitu gradien linear berarah kata kunci, gradien linear bersudut, gradien linear dengan batas tegas, gradien radial lingkaran di pusat, gradien radial elips di sudut, dan kombinasi dua lapis yang menumpuk radial di atas linear. Jalankan demo, bandingkan keenam panel, lalu perhatikan lapisan terang pada panel kombinasi yang menggambar di atas gradasi di belakangnya.

Kode sumber demo

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo ragam linear-gradient dan radial-gradient</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <main>
    <div class="kisi">
      <figure>
        <div class="panel g1"></div>
        <figcaption>linear-gradient to right</figcaption>
      </figure>
      <figure>
        <div class="panel g2"></div>
        <figcaption>linear-gradient 45deg</figcaption>
      </figure>
      <figure>
        <div class="panel g3"></div>
        <figcaption>linear-gradient batas tegas</figcaption>
      </figure>
      <figure>
        <div class="panel g4"></div>
        <figcaption>radial-gradient circle di pusat</figcaption>
      </figure>
      <figure>
        <div class="panel g5"></div>
        <figcaption>radial-gradient ellipse di sudut</figcaption>
      </figure>
      <figure>
        <div class="panel g6"></div>
        <figcaption>dua lapis: radial di atas linear</figcaption>
      </figure>
    </div>
  </main>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1e293b;
  background-color: #f8fafc;
}

.kisi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: #475569;
}

.panel {
  height: 110px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

/* arah kata kunci: dari kiri ke kanan */
.g1 {
  background-image: linear-gradient(to right, #1d4ed8, #38bdf8);
}

/* sudut 45 derajat */
.g2 {
  background-image: linear-gradient(45deg, #15803d, #86efac);
}

/* dua pasang stop berbagi posisi 50%: batas tegas */
.g3 {
  background-image: linear-gradient(
    to bottom,
    #0f172a 0%,
    #0f172a 50%,
    #e2e8f0 50%,
    #e2e8f0 100%
  );
}

/* lingkaran yang menyebar dari pusat */
.g4 {
  background-image: radial-gradient(circle at center, #fde68a 0%, #f59e0b 45%, #7c2d12 100%);
}

/* elips yang menyebar dari sudut kiri atas */
.g5 {
  background-image: radial-gradient(ellipse at top left, #eff6ff 0%, #93c5fd 45%, #1d4ed8 100%);
}

/* lapisan pertama digambar paling atas */
.g6 {
  background-image:
    radial-gradient(circle at 70% 30%, rgb(255 255 255 / 0.85) 0%, transparent 40%),
    linear-gradient(120deg, #312e81, #7e22ce);
}

</style>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1e293b;
  background-color: #f8fafc;
}

.kisi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: #475569;
}

.panel {
  height: 110px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

/* arah kata kunci: dari kiri ke kanan */
.g1 {
  background-image: linear-gradient(to right, #1d4ed8, #38bdf8);
}

/* sudut 45 derajat */
.g2 {
  background-image: linear-gradient(45deg, #15803d, #86efac);
}

/* dua pasang stop berbagi posisi 50%: batas tegas */
.g3 {
  background-image: linear-gradient(
    to bottom,
    #0f172a 0%,
    #0f172a 50%,
    #e2e8f0 50%,
    #e2e8f0 100%
  );
}

/* lingkaran yang menyebar dari pusat */
.g4 {
  background-image: radial-gradient(circle at center, #fde68a 0%, #f59e0b 45%, #7c2d12 100%);
}

/* elips yang menyebar dari sudut kiri atas */
.g5 {
  background-image: radial-gradient(ellipse at top left, #eff6ff 0%, #93c5fd 45%, #1d4ed8 100%);
}

/* lapisan pertama digambar paling atas */
.g6 {
  background-image:
    radial-gradient(circle at 70% 30%, rgb(255 255 255 / 0.85) 0%, transparent 40%),
    linear-gradient(120deg, #312e81, #7e22ce);
}

</style></body>
</html>

Urutan lapisan pada panel kombinasi menegaskan aturan tumpukan yang sama dengan overlay. Lapisan yang disebut lebih dulu menutupi lapisan di belakangnya, sehingga gradien transparan digambar di atas dan gradien pekat di bawah. Susunan ini memungkinkan latar yang berlapis tanpa elemen tambahan apa pun.

Kesalahan umum#

Kesalahan pertama adalah menuliskan gradien pada properti color. Gradien adalah gambar latar, sehingga penempatan itu diabaikan browser dan warna teks tidak berubah. Perbaikannya, pindahkan deklarasi ke background-image atau ke shorthand background.

Kesalahan kedua adalah membalik urutan lapisan saat menggabungkan gradien dan gambar. Lapisan gambar yang diletakkan di depan akan menutupi overlay gradien, sehingga teks di atasnya kembali sulit dibaca. Perbaikannya, ingat bahwa lapisan pertama dalam daftar digambar paling atas, lalu susun overlay gelap sebelum url() gambar.

Kesalahan ketiga adalah mengharapkan transition menganimasikan perubahan warna gradien. Properti background-image tidak dapat dianimasikan secara halus oleh transisi, sehingga pergantian gradien berlangsung seketika. Perbaikannya, gunakan dua lapisan atau elemen terpisah dan animasikan properti opacity milik lapisan atasnya.

Kesalahan keempat adalah melupakan kontras teks di atas gradien yang berubah warna. Bagian gradien yang terang menuntut teks gelap, sedangkan bagian gelapnya menuntut teks terang, sehingga satu warna teks sering tidak mencukupi. Perbaikannya, persempit rentang gradien agar terang atau gelapnya konsisten, atau beri lapisan pemedah di bawah area teks.

Ringkasan#

Fungsi gradien menghasilkan gambar latar dan dituliskan pada background-image, bukan pada color.
linear-gradient() merentangkan gradasi pada sebuah garis dengan arah kata kunci atau sudut, di mana 0deg menunjuk ke atas dan bertambah searah jarum jam.
Color stop dapat diberi posisi, dan dua stop pada posisi yang sama menghasilkan batas tegas.
radial-gradient() menyebar dari titik pusat dengan bentuk ellipse atau circle yang posisinya diatur dengan at.
Teks di atas gradien tetap diuji kontrasnya, dan overlay gelap semi transparan menjadi penjaganya.

Referensi#

CSS gradient — MDN — Gambaran fungsi gradien CSS dan seluruh variasinya.
linear-gradient() — MDN — Dokumentasi arah, sudut, dan color stop pada gradien linear.
radial-gradient() — MDN — Dokumentasi bentuk, posisi, dan ukuran pada gradien radial.
Learn CSS — web.dev — Kursus resmi CSS yang mencakup bab warna dan latar.

Gradien adalah gambar latar#

linear-gradient: arah dan sudut#

Color stop dan penempatan persen#

radial-gradient: bentuk dan posisi#

Penerapan pada tombol, banner, dan overlay teks#

Kesalahan umum#

Ringkasan#

Referensi#