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

Loading diagram...

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

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

CSS Shadows Border Radius Gradients Masking Basics | Rujukan Pemrograman | Mahir.dev Academy

Selesai membaca dokumentasi ini?