CSS Shadows Border Radius Gradients Masking Basics

Definisi

Topik ini membahas empat alat visual CSS yang sering dipakai untuk membentuk karakter UI tanpa menambah markup tambahan:

• box-shadow dan filter: drop-shadow() untuk memberi kedalaman atau memisahkan elemen dari latar.
• border-radius untuk membulatkan sudut dan membentuk silhouette komponen.
• linear-gradient(), radial-gradient(), dan conic-gradient() untuk membangun transisi warna atau highlight yang halus.
• masking seperti mask-image, mask-composite, atau clip-path untuk mengontrol bagian mana dari elemen yang terlihat.

Empat hal ini sering diperlakukan sebagai “hiasan”, padahal efeknya langsung memengaruhi keterbacaan, konsistensi bentuk, dan performa rendering. Dokumentasi ini fokus pada kapan dipakai, cara kerjanya, dan jebakan yang sering muncul di production UI.

Kapan dipakai

Gunakan efek visual ini saat kamu ingin:

• memberi hierarki visual pada card, dropdown, modal, atau floating panel
• membuat komponen terasa lebih halus tanpa menambah gambar aset
• membangun background dekoratif yang tetap responsif
• mempertajam bentuk komponen seperti pill, avatar, chip, atau badge
• membuat highlight, sheen, overlay, atau “soft separation” antar layer
• memotong atau membatasi bentuk visual tertentu dengan mask atau clipping

Kalau efek visual mulai mengganggu teks, kontras warna, atau waktu render, biasanya kamu sudah terlalu jauh. Efek yang baik membantu membaca isi, bukan bersaing dengan isi.

Box shadow vs filter drop shadow

Dua efek ini kelihatannya mirip, tapi model kerjanya beda.

box-shadow

box-shadow memberi bayangan berbasis kotak elemen. Bentuk shadow mengikuti border box elemen, bukan bentuk pixel konten di dalamnya.

Contoh:

css

.card {
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.12);
}

Pakai box-shadow saat:

• elemen memang punya bentuk kotak, rounded rectangle, atau pill
• kamu butuh shadow yang stabil dan mudah dikontrol
• komponen adalah container seperti card, button, popover, toast, atau sheet
• shadow hanya perlu mengikuti outline elemen, bukan alpha dari isi gambar

Kelebihan utamanya:

• mudah dibaca dan umum dipakai
• bisa membuat beberapa layer shadow sekaligus
• cocok untuk komponen UI yang konsisten

Keterbatasannya:

• shadow tidak mengikuti bentuk non-kotak dari konten visual secara detail
• pada elemen dengan outline kompleks, hasilnya bisa terasa “terlalu kotak”
• blur besar dan banyak layer bisa mahal jika dipakai berlebihan pada daftar panjang

filter: drop-shadow()

drop-shadow() bekerja lewat filter visual pada hasil render elemen. Ia lebih cocok untuk konten yang punya alpha transparan atau bentuk non-rectangular.

Contoh:

css

.icon {
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.18));
}

Pakai drop-shadow() saat:

• elemen punya bentuk transparan, misalnya PNG, SVG, atau icon dengan area kosong
• kamu ingin shadow mengikuti silhouette visual asli
• efek yang diinginkan lebih dekat ke “bayangan hasil rasterisasi” daripada bayangan box

Kelebihan utamanya:

• mengikuti alpha channel
• lebih natural untuk icon, logo, atau aset transparan
• berguna saat box-shadow terasa terlalu kaku

Keterbatasannya:

• biasanya lebih berat daripada shadow sederhana berbasis box, terutama jika dipakai berulang
• dapat memicu pipeline filter yang lebih mahal
• kurang ideal untuk banyak elemen list yang harus dirender cepat

Aturan praktis memilih shadow

• Pilih box-shadow untuk komponen UI umum.
• Pilih drop-shadow() untuk shape yang bergantung pada transparansi atau outline non-rectangular.
• Jangan pakai shadow besar di banyak elemen sekaligus kalau tidak ada alasan visual yang jelas.
• Kalau shadow hanya bertujuan “biar kelihatan modern”, evaluasi ulang apakah kontras, spacing, atau border sebenarnya sudah cukup.

Border radius dan bentuk

border-radius mengubah sudut elemen sehingga bentuknya lebih lembut dan lebih mudah dipetakan secara visual.

css

.card {
  border-radius: 16px;
}

Cara radius memengaruhi bentuk

Radius bukan sekadar efek rounding. Ia mengubah cara mata membaca bentuk elemen:

• 0 terasa tegas, kaku, dan boxy.
• radius kecil terasa rapi dan sedikit halus.
• radius besar mendorong bentuk ke arah pill atau capsule.
• radius penuh pada elemen persegi menghasilkan lingkaran.

Kalau radius diterapkan ke container, semua detail di dalamnya ikut terasa mengikuti bahasa bentuk itu. Artinya, radius berhubungan langsung dengan identitas visual komponen.

Hal yang perlu diperhatikan

• Radius besar pada komponen kecil bisa membuat isi terlihat sempit.
• Radius tidak otomatis memperbaiki layout; ia hanya mengubah silhouette.
• overflow: hidden sering dibutuhkan agar background, gambar, atau pseudo-element tidak keluar dari sudut yang dibulatkan.
• Pada gambar atau media, radius harus diuji bersama aspect ratio, karena crop yang buruk mudah terlihat tidak sengaja.

Bentuk umum yang sering dipakai

• 4px–8px: halus, netral, dan cocok untuk banyak UI dasar
• 12px–16px: terasa modern dan nyaman untuk card
• 9999px: pill shape untuk chip, badge, dan button kecil
• 50%: bentuk bulat penuh jika lebar dan tinggi sama

Jebakan radius

• Radius berbeda-beda tanpa sistem membuat UI terasa tidak konsisten.
• Radius besar tanpa spacing yang cukup membuat konten tampak sesak.
• Mengandalkan radius untuk menyamarkan layout yang sebenarnya belum rapi.

Gradient dasar

Gradient adalah transisi warna yang dihitung browser tanpa aset gambar statis.

Tiga bentuk yang paling umum:

• linear-gradient() untuk transisi sepanjang garis
• radial-gradient() untuk transisi dari pusat atau titik tertentu
• conic-gradient() untuk transisi yang berputar mengelilingi pusat

linear-gradient()

Dipakai untuk background, overlay, highlight, atau pemisah visual lembut.

css

.hero {
  background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
}

Gunakan saat kamu butuh arah cahaya atau transisi warna yang konsisten dari satu sisi ke sisi lain.

radial-gradient()

Cocok untuk spotlight, glow, atau efek fokus dari titik tertentu.

css

.banner {
  background: radial-gradient(circle at top, rgb(255 255 255 / 0.18), transparent 60%);
}

conic-gradient()

Sering dipakai untuk progress ring, chart dekoratif, atau aksen berbentuk putaran.

css

.progress {
  background: conic-gradient(#22c55e 0 72%, #e5e7eb 72% 100%);
}

Dasar yang perlu dipahami

• Gradient punya color stop. Stop menentukan di mana transisi warna mulai dan berakhir.
• Stop yang terlalu dekat bisa menciptakan garis tajam.
• Gradient tidak harus dari dua warna; kamu bisa menambahkan beberapa stop untuk kontrol yang lebih halus.
• Gradient sering lebih fleksibel daripada gambar, terutama kalau layout responsif.

Jebakan gradient

• Gradient yang terlalu ramai mengganggu teks di atasnya.
• Warna yang terlalu mirip bisa membuat transisi terlihat seperti banding atau noise.
• Overlay gelap/terang yang salah bisa menurunkan kontras konten.
• Gradient dekoratif yang berlebihan membuat halaman terasa berat secara visual.

Masking basics

Masking dipakai untuk menentukan bagian elemen mana yang terlihat. Ini berbeda dari sekadar warna atau radius; masking bekerja seperti filter visibilitas.

Properti yang sering muncul

• mask-image: menentukan gambar atau gradient yang dipakai sebagai mask
• mask-size: ukuran mask
• mask-position: posisi mask
• mask-repeat: pengulangan mask
• mask-composite: cara beberapa layer mask digabungkan
• clip-path: pemotongan bentuk secara geometris, sering dipakai sebagai alternatif saat butuh bentuk yang lebih eksplisit

Kapan masking berguna

• membuat fade-out di tepi konten
• menyembunyikan bagian elemen secara halus tanpa memotong tajam
• membentuk efek hero, spotlight, atau reveal
• memotong gambar atau layer dekoratif dengan bentuk khusus

Contoh dasar:

css

.fade-edge {
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

Masking vs clipping

• Gunakan masking kalau kamu butuh transparansi bertahap.
• Gunakan clipping kalau kamu butuh pemotongan bentuk yang tegas.

Jebakan masking

• Masking bisa sulit di-debug karena hasil akhirnya terlihat seperti elemen “hilang” tanpa sebab.
• Tidak semua efek mask lebih murah dari alternatif lain.
• Kalau tujuannya cuma rounded crop sederhana, border-radius sering lebih jelas dan lebih murah.

Alur keputusan visual style

Alur ini sengaja dibuat sederhana: mulai dari tujuan, lalu cocokkan dengan alat yang paling tepat. Kalau kamu memulai dari efek yang ingin dipakai, biasanya keputusan jadi bias dan hasil akhirnya lebih mahal untuk dirawat.

Catatan implementasi

Readability dulu, baru dekorasi

Visual effect sebaiknya tidak mengorbankan:

• kontras teks terhadap latar
• keterbacaan label dan angka
• fokus state untuk keyboard
• penjelasan hierarki konten

Kalau teks di atas gradient atau glow jadi sulit dibaca, kurangi intensitas efek atau tambahkan layer overlay yang lebih tenang.

Performance dulu, baru polish

Beberapa efek aman dipakai sesekali, tapi mahal kalau muncul di banyak elemen:

• blur besar
• beberapa shadow bertumpuk
• filter yang kompleks
• mask di list panjang
• gradient berat pada banyak layer yang bergerak

Untuk komponen yang di-render massal, pilih versi yang paling sederhana dan paling stabil. Satu shadow ringan sering lebih baik daripada tiga shadow dekoratif.

Konsistensi bentuk

Radius, shadow, dan gradient sebaiknya mengikuti satu bahasa visual yang sama.

Contoh pola yang sehat:

• card menggunakan radius konsisten
• tombol mengikuti skala radius yang sama
• shadow tidak lebih dramatis daripada kontennya
• gradient hanya dipakai sebagai aksen, bukan pengganti struktur

Saat efek sebaiknya dihindari

• tabel data padat
• dashboard dengan banyak angka kecil
• halaman yang mengutamakan scan cepat
• list panjang dengan item seragam
• area yang sudah penuh warna dan tidak butuh dekorasi tambahan

Kesalahan umum

• Menggunakan shadow tebal untuk menyelesaikan masalah spacing.
• Memakai radius besar pada semua komponen tanpa sistem.
• Menumpuk gradient, shadow, dan blur sampai teks kalah oleh dekorasi.
• Menggunakan mask saat clip-path atau border-radius sudah cukup.
• Mengoptimalkan tampilan sampai performa dan keterbacaan turun.

Contoh pola pakai yang sehat

css

.card {
  border-radius: 16px;
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.10);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
 
.card__media {
  border-radius: 12px;
  overflow: hidden;
}
 
.icon {
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.14));
}

Pola di atas sederhana, tapi justru itu yang biasanya paling tahan lama: radius konsisten, shadow secukupnya, gradient ringan, dan masking hanya dipakai kalau benar-benar perlu.

Referensi terkait

• box-shadow
• filter: drop-shadow()
• border-radius
• linear-gradient(), radial-gradient(), conic-gradient()
• mask-image
• clip-path
• artikel CSS lain di seri ini tentang transform, filter, typography, dan layout