Preset

Cara menggunakan

1. Seret slider untuk mengatur offset horizontal dan vertikal, blur, spread, dan opasitas.
2. Pilih warna bayangan dan aktifkan "inset" jika diperlukan.
3. Klik "Tambah lapisan bayangan" untuk menumpuk beberapa bayangan.
4. Gunakan preset sebagai titik awal cepat.
5. Klik "Salin CSS" untuk menempel hasilnya di stylesheet Anda.

Pertanyaan yang Sering Diajukan

Apa itu box-shadow di CSS?

Properti CSS box-shadow menambahkan efek bayangan di sekitar elemen. Ia mengambil nilai untuk offset horizontal, offset vertikal, radius blur, radius spread, dan warna.

Bisakah saya menambahkan beberapa bayangan?

Ya. Klik "Tambah lapisan bayangan" untuk menambahkan bayangan lain. Banyak bayangan dipisahkan dengan koma di keluaran CSS. Ini memungkinkan efek berlapis yang kompleks.

Apa kegunaan kata kunci inset?

Menambahkan "inset" membuat bayangan muncul di dalam elemen, bukan di luar, menciptakan bayangan dalam atau efek "cekung".

Lima parameter box-shadow

CSS box-shadow melampirkan satu atau lebih efek drop-shadow pada border box elemen. Gramarnya adalah box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?, dengan beberapa bayangan dipisahkan koma. Setiap parameter melakukan satu hal tertentu:

• offset-x: jarak bayangan digeser secara horizontal. Positif bergerak ke kanan; negatif bergerak ke kiri. 0 memusatkan secara horizontal.
• offset-y: pergeseran vertikal. Positif bergerak ke bawah (meniru pencahayaan dari atas, konvensi UI yang paling umum). Negatif bergerak ke atas.
• blur-radius: seberapa jauh tepi bayangan memudar menjadi transparan. Diimplementasikan sebagai konvolusi Gaussian; nilai lebih besar menghasilkan bayangan yang lebih lembut, lebih besar, lebih difus. Nilai negatif tidak valid; 0 menghasilkan tepi yang keras dan tajam.
• spread-radius: memperbesar (positif) atau memperkecil (negatif) bentuk bayangan sebelum blur diterapkan. Spread positif memperluas bayangan ke setiap arah; negatif menyusutkannya, memungkinkan Anda membatasi bayangan hanya pada satu sisi kotak.
• color: default ke currentcolor (nilai color elemen itu sendiri, yang terkadang mengejutkan). Bayangan UI hampir selalu menggunakan hitam atau mendekati hitam dengan alpha rendah, rgba(0,0,0,0.05) hingga rgba(0,0,0,0.25): karena bayangan hitam solid terlihat berat dan tidak alami.
• Kata kunci inset melukis bayangan di dalam kotak alih-alih di luar. Digunakan untuk status tombol yang ditekan, «sumur» input yang tersembunyi, dan efek cahaya dalam.

Browser mengomposit daftar bayangan dari depan ke belakang: bayangan yang terdaftar pertama paling dekat dengan penampil, yang terakhir paling jauh. Ini adalah urutan yang sama dengan text-shadow dan background, tetapi merupakan kebalikan dari cara kebanyakan aturan CSS bertingkat, yang sering mengejutkan penulis baru.

Sistem elevasi dua-bayangan Material Design

Material Design Google (diperkenalkan Mei 2014; Material Design 3 pada tahun 2021) mendefinisikan sistem elevasi terkuantisasi di mana permukaan UI berada pada salah satu dari beberapa level piksel independen kepadatan. Resep bayangan di setiap level menggunakan dua bayangan bertumpuk:

• Umbra (bayangan kunci), lebih kecil, lebih gelap, mewakili cahaya yang langsung terhalang di bawah permukaan. Offset dan blur pendek.
• Penumbra (bayangan ambient), lebih besar dan lebih difus, mewakili cahaya tersebar yang memantul di sekitar ruangan. Offset lebih besar, blur lebih besar, alpha lebih terang.

Dalam Material Design 2, nilai elevasi berkisar dari 0dp (tidak ada bayangan) hingga 24dp; kartu biasanya menggunakan 1-2dp saat diam dan dianimasikan ke 8dp saat hover, sementara dialog modal menggunakan 24dp. Material Design 3 memadatkan skala menjadi lima Level bernama (1 hingga 5) dan menambahkan overlay bertona selain drop-shadow pada tema gelap. Struktur umbra-ditambah-penumbra tetap menjadi model visual, dan itulah mengapa shadow-md Tailwind dikirimkan sebagai dua bayangan bertumpuk: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06).

Neumorfisme: tren yang membutuhkan dua bayangan berlawanan

Neumorfisme (gabungan kata «new» dan «skeuomorphism») melonjak ke popularitas viral pada akhir 2019 / awal 2020 setelah sebuah postingan Dribbble Desember 2019 oleh desainer Ukraina Alexander Plyuto berjudul «Skeuomorph Mobile Banking» mengumpulkan puluhan ribu suka dalam beberapa minggu. Resep yang mendefinisikannya adalah dua box-shadow pada elemen dengan warna latar belakang yang sama dengan induknya: bayangan lebih gelap di kanan bawah dan bayangan lebih terang di kiri atas. Sisi gelap menyimulasikan permukaan yang menjauh dari sumber cahaya; sisi terang menyimulasikan permukaan yang terangkat ke highlight pada sisi yang menghadap cahaya. Membalik offset (atau menambahkan inset ke keduanya) menciptakan tampilan tersembunyi/ditekan.

Peringatan aksesibilitas yang jujur: neumorfisme telah banyak dikritik karena kontras visual antara elemen dan latar belakangnya sangat rendah, keduanya berbagi warna. Tombol dan input dapat gagal WCAG 1.4.11 (Non-text Contrast, AA, rasio 3:1 komponen UI terhadap warna yang berdekatan). Status ditekan dan tidak ditekan sering hanya dapat dibedakan melalui arah bayangan yang halus, yang tidak dapat disampaikan oleh pembaca layar dan tidak terlihat oleh siapa pun dengan penglihatan rendah, buta warna, atau silau layar. Gunakan gaya ini secukupnya pada permukaan dekoratif, bukan kontrol utama.

box-shadow vs filter: drop-shadow()

CSS Filter Effects mendefinisikan alternatif, filter: drop-shadow(<x> <y> <blur> <color>): yang terlihat mirip secara visual tetapi dengan perbedaan penting. box-shadow menghasilkan bayangan dari persegi panjang border box (dibulatkan oleh border-radius jika ada). drop-shadow menghasilkan bayangan dari saluran alpha elemen yang dirender, termasuk anak-anak, PNG transparan, bentuk SVG dengan potongan, konten yang dimask. Alasan paling umum untuk memilih drop-shadow adalah ketika elemen yang ingin Anda beri bayangan bukan persegi panjang, ikon PNG transparan, logo SVG, segitiga speech-bubble.

	box-shadow	drop-shadow()
Parameter spread	Ya	Tidak
Varian inset	Ya	Tidak
Beberapa bayangan	Ya (daftar koma)	Ya (rantaikan filter)
Memengaruhi turunan	Tidak	Ya (seluruh subtree)
Pemotongan	Dapat melebar melewati overflow:hidden	Terbatas pada batas filter
Performa	Ramah compositor	Memicu fase filter

Catatan performa

Box-shadow adalah salah satu properti CSS yang lebih mahal untuk dirender secara real time. Biayanya memiliki tiga penggerak: ukuran kernel blur (blur Gaussian adalah konvolusi dua-pass yang dapat dipisahkan; menggandakan blur melipatempat pekerjaan per-piksel, sehingga blur 100 piksel pada kartu besar dapat menurunkan frame rate secara nyata saat scroll), luas permukaan bayangan (persegi panjang yang diperluas oleh spread dan diperbesar lebih lanjut oleh blur adalah yang harus di-rasterisasi GPU, bayangan modal-overlay besar adalah jenis yang paling mahal), dan repaint (animasi box-shadow memicu repaint dari area bayangan setiap frame).

Rekomendasi praktis:

• Untuk animasi elevasi hover, sebaiknya animasikan transform: translateY() dan opacity daripada box-shadow. Keduanya dipercepat GPU dan tidak memicu repaint.
• Untuk penggantian bayangan saat hover, deklarasikan kedua bayangan pada pseudo-element dengan yang lebih besar pada opacity: 0, lalu animasikan opacity pseudo-element tersebut. Ini mengganti bayangan tanpa menganimasikan kernel blur itu sendiri, «Shadow Tricks» Tobias Ahlin (2017) adalah tulisan kanonik untuk ini.
• will-change: transform dapat memberi petunjuk kepada browser untuk mempromosikan elemen ke layer compositor sendiri. Gunakan secukupnya, mempromosikan banyak elemen memboroskan memori GPU.
• Hindari box-shadow pada elemen yang berisi banyak konten scroll. Setiap frame scroll harus me-repaint bayangan.

Aksesibilitas

Bayangan bersifat dekoratif sejauh menyangkut pohon aksesibilitas (pembaca layar mengabaikannya) tetapi memiliki implikasi:

• WCAG 1.4.11 Non-text Contrast (AA, 3:1). Jika kartu atau tombol hanya dibedakan dari latar belakangnya melalui bayangan, bayangan tersebut secara efektif mendefinisikan tepi visual, dan bayangan rgba(0,0,0,0.05) yang samar pada latar belakang mendekati putih mungkin tidak memenuhi ambang batas 3:1. Banyak sistem desain menggabungkan bayangan ditambah border solid 1px untuk menjamin kontrasnya.
• Indikator fokus. box-shadow: 0 0 0 3px <color> adalah alternatif modern untuk outline default browser karena mengikuti border-radius. Ring tersebut harus memenuhi WCAG 2.4.7 Focus Visible, minimal tebal 2 piksel CSS, dengan kontras 3:1 terhadap status tidak-terfokus dan warna yang berdekatan.
• Forced-colors / Windows High Contrast. Dalam mode forced-colors: active, browser mengabaikan sebagian besar warna CSS dan mewarnai ulang konten dengan palet sistem pengguna. Box-shadow dihapus atau dikurangi; status UI harus selalu memiliki indikator non-bayangan (perubahan border, perubahan warna, ikon, label teks) untuk pengguna ini.
• Reduced motion. Pengguna dengan prefers-reduced-motion: reduce tidak boleh melihat animasi bayangan besar saat hover atau scroll. Bungkus transisi yang dianimasikan dalam media query dan pertahankan bayangan yang beristirahat untuk pengguna ini.

Resep cepat

Efek	CSS
Angkat kartu halus	0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
Kartu modern lembut	0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
Angkat modal berat	0 25px 50px -12px rgba(0,0,0,0.25)
Cap 1px tajam	0 0 0 1px rgba(0,0,0,0.05)
Cincin fokus (3px)	0 0 0 3px rgba(59,130,246,0.5)
Ceruk input «well»	inset 0 2px 4px 0 rgba(0,0,0,0.06)
Halo cahaya	0 0 20px 4px rgba(99,102,241,0.6)

Pertanyaan lainnya

Mengapa bayangan saya terpotong?

Hampir selalu karena elemen leluhur memiliki overflow: hidden. Bayangan melebar melewati border box tetapi dipotong di tepi leluhur. Dua perbaikan: angkat bayangan ke leluhur itu sendiri, atau gunakan elemen pembungkus tanpa pemotongan overflow. filter: drop-shadow() tidak memiliki masalah ini tetapi memiliki trade-off tersendiri.

Haruskah saya masih menggunakan vendor prefix seperti -webkit-box-shadow?

Tidak. box-shadow tanpa awalan telah didukung secara universal sejak sekitar tahun 2012. Vendor prefix adalah noise murni dalam kode 2026 dan harus dihapus. Pustaka CSS reset dari awal 2010-an sering menyertakannya secara defensif; kode modern dapat menghapusnya dengan aman.

Bagaimana cara menerapkan bayangan pada teks, bukan kotaknya?

Gunakan text-shadow, yang memiliki sintaks offset / blur / warna yang sama tetapi tidak ada spread atau inset. Untuk bayangan berbentuk glyph pada teks yang diberi gaya (misalnya teks gradien background-clip: text), filter: drop-shadow() pada induk adalah alat yang tepat, box-shadow akan menghasilkan bayangan persegi panjang di belakang glyph.

Mengapa bayangan 0 0 0 2px saya tidak terlihat lembut?

Karena nilai ketiga (radius blur) adalah 0. Bayangan hanya-spread tanpa blur menghasilkan outline solid yang tajam, yang persis yang Anda inginkan untuk focus ring dan trik «outline palsu» tetapi tidak untuk elevasi lembut. Tambahkan sedikit blur: 0 0 4px 0 rgba(0,0,0,0.2).

Apakah ada yang dikirim ke server?

Tidak. Pratinjau di-render ulang di browser Anda saat Anda menyeret slider; string CSS dibuat secara lokal; menyalin menulis ke clipboard Anda. Halaman berfungsi secara offline setelah dimuat.

Alat Terkait