Efek visual

Kedalaman dan tekstur

• Lapisi beberapa bayangan untuk efek kedalaman lembut yang realistis.
• Gunakan filter: drop-shadow(), bukan box-shadow, untuk bentuk non-persegi panjang atau PNG transparan.
• Gunakan mix-blend-mode dan background-blend-mode untuk overlay pencahayaan (batasi cakupan dengan isolation: isolate)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

Gradien dan color-mix()

Gunakan in oklch atau in oklab untuk menentukan ruang warna interpolasi secara eksplisit untuk gradien atau color-mix().

• in oklch mempertahankan kroma dengan lebih baik, tetapi dapat lebih mudah keluar dari gamut perangkat, terutama untuk perbedaan warna yang lebih besar
• in oklab tetap berada dalam gamut dengan lebih mudah (dengan asumsi endpoint dalam gamut), tetapi dapat menghasilkan warna desaturasi yang pudar di tengah, terutama saat melakukan interpolasi antara hue yang berlawanan.
• JANGAN gunakan in srgb kecuali jika Anda memiliki alasan khusus untuk melakukannya (misalnya, Anda sedang membuat pemilih warna yang perlu diinterpolasi dalam srgb).

Pengganti

Beberapa browser sebelum tahun 2024 tidak mendukung ruang interpolasi warna gradien. Untuk mendukung browser ini, gunakan token hanya jika penggunaannya aman dengan menentukan variabel:

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

Kemudian, gunakan seperti:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• Penting: Jika Anda menggunakan teknik ini, pastikan selalu ada preamble gradien yang tidak kosong tanpanya, jika tidak, akan terjadi error sintaksis di browser lama.
• Anda TIDAK memerlukan ini untuk color-mix(). Jika browser mendukung color-mix(), browser tersebut juga mendukung argumen in <color-space>-nya.

Pola

Banyak pola dapat dibuat melalui gradien CSS + hard stop, dan pola ini dapat lebih fleksibel dan berperforma lebih baik daripada SVG atau gambar eksternal karena dapat memiliki akses ke variabel dan panjang CSS dari konteks di sekitarnya. Anda tidak perlu mengulangi posisi dua kali — cukup gunakan 0 atau 0% dan perbaikan gradien akan otomatis menyesuaikannya.

Contohnya di bawah ini.

Garis vertikal dengan lebar masing-masing 1em:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

Garis-garis diagonal dengan lebar masing-masing 1em:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

Pola papan catur dengan 1em kotak:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

Polkadot dengan titik radius .5em yang berjarak 2em (secara horizontal/vertikal — kalikan dengan sqrt(2) untuk jarak diagonal):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

Diagram lingkaran sederhana:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

Penting: Saat menggunakan gradien untuk merender diagram, pastikan ada penggantian tekstual untuk pembaca layar. WAJIB: Anda HARUS menyediakan tabel data semantik sebagai alternatif yang mudah diakses, seperti yang dijelaskan dalam Panduan Coding Aksesibilitas di bagian panduan teks dan media alternatif.