Lewati ke konten

Generator box shadow

Box shadow CSS berlapis dengan pratinjau langsung: atur offset, blur, spread, warna, dan opasitas, tumpuk beberapa bayangan, lalu salin CSS.

px
px
px
px
%
Prasetel

CSS yang dihasilkan

CSS

box-shadow: none;

Atur penggeser di atas, lalu Tambah ke tumpukan bayangan.

Bayangan aktif

    Belum ada bayangan. Sesuaikan penggeser, lalu klik Tambahkan ke tumpukan bayangan.

    Cara kerja

    Generator box shadow ini memungkinkan Anda membuat, menumpuk, dan mempratinjau beberapa lapisan box-shadow CSS secara visual: atur offset X dan Y, blur, spread, warna, opasitas, dan inset, lalu tambahkan setiap lapisan ke tumpukan yang digabungkan menjadi satu deklarasi yang dipisahkan koma.

    1. Bentuk satu bayangan

      Atur ofset, blur, spread, warna, dan opasitas, serta aktifkan inset jika diperlukan.

    2. Tambahkan ke tumpukan

      Ulangi untuk menumpuk beberapa bayangan pada elemen yang sama agar tampak lebih dalam.

    3. Salin CSS

      Setiap lapisan dalam tumpukan digabungkan menjadi satu deklarasi box-shadow.

    Sintaksis box-shadow

    Setiap lapisan bayangan menerima hingga lima nilai, dengan warna di posisi terakhir:

    box-shadow: offset-x offset-y blur-radius spread-radius color;

    Tambahkan kata kunci inset sebelum ofset untuk menggambar bayangan di dalam kotak batas elemen, bukan di luarnya. Pisahkan beberapa lapisan dengan koma; lapisan pertama yang terdaftar akan dirender di paling atas.

    Kabur versus sebar

    • Radius blur: tingkat kelembutan tepi bayangan. Nilai yang lebih tinggi menghasilkan cahaya yang lebih menyebar; nilai 0 menghasilkan tepi yang tajam.
    • Radius spread: memperbesar atau memperkecil bentuk bayangan sebelum proses blur. Spread positif membuat bayangan lebih besar daripada elemen; spread negatif mengecilkannya, yang umum digunakan untuk efek mengambang yang lembut dan merapat.

    Penumpukan bayangan untuk kedalaman

    Satu bayangan besar sering kali terlihat datar. Bayangan antarmuka yang realistis biasanya terdiri dari dua atau tiga lapisan: bayangan yang rapat, gelap, dan beropasitas rendah di dekat elemen untuk efek kontak, serta bayangan yang lebih besar, lebih lembut, dan beropasitas lebih rendah di bagian luar untuk kedalaman ambient. Prasetel Mengambang mendemonstrasikan hal ini dengan dua lapisan yang ditumpuk.

    Catatan performa

    box-shadow mengikuti border-radius dari elemen tempatnya diterapkan, bukan bentuk elemen anaknya. Banyak bayangan besar yang dikaburkan dan ditumpuk pada elemen yang dapat digulir bisa memperlambat proses penggambaran ulang pada ponsel berspesifikasi rendah; filter: drop-shadow() adalah alternatif komposisi GPU yang patut diuji untuk bayangan pada gambar atau SVG.

    Pertanyaan yang sering diajukan

    Bagaimana cara menghasilkan bayangan kotak CSS dengan ofset dan blur kustom?

    Gunakan penggeser untuk mengatur ofset X, ofset Y, blur, dan spread dalam piksel, pilih warna dan opasitas bayangan, lalu klik Tambahkan ke tumpukan bayangan. Kode CSS diperbarui seketika di bawah ini. Sebagai contoh, bayangan kartu yang lembut mungkin tertulis box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0,25);

    Apa perbedaan antara blur dan spread pada box-shadow?

    Blur mengontrol kelembutan tepi bayangan; nilai yang lebih tinggi menciptakan pendar yang lebih menyebar. Spread memperluas atau menyusutkan bayangan sebelum diblurkan: spread positif membuat bayangan lebih besar daripada elemen, sedangkan spread negatif mengecilkannya. Bayangan dengan blur 30px dan spread -10px memberikan efek mengambang yang realistis dengan tepi keras yang tertarik ke dalam.

    Bagaimana cara membuat bayangan inset agar elemen tampak tertekan?

    Aktifkan sakelar bayangan Inset sebelum mengklik Tambahkan ke tumpukan bayangan. Bayangan inset digambar di dalam kotak batas elemen, membuatnya tampak cekung atau tertekan. Kode CSS menyertakan kata kunci inset: box-shadow: inset 0px 2px 8px 0px rgba(0, 0, 0, 0,30);

    Dapatkah Anda menumpuk beberapa bayangan kotak pada satu elemen?

    Ya. Tambahkan setiap lapisan bayangan secara terpisah; alat ini menyimpan daftar dan menggabungkannya dengan koma dalam keluaran. Penumpukan adalah fitur standar CSS: box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 20px 40px -10px rgba(0,0,0,.3); Beberapa lapisan menciptakan kedalaman yang lebih kaya dibandingkan bayangan tunggal.

    Apa keterbatasan dari box-shadow?

    box-shadow tidak mengikuti border-radius elemen anak; properti ini hanya mengikuti border-radius elemen tempatnya diterapkan. Nilai blur yang sangat besar pada banyak bayangan bertumpuk juga dapat memperlambat pengguliran pada ponsel berspesifikasi rendah, jadi filter: drop-shadow() patut dicoba sebagai alternatif yang lebih ringan untuk bayangan pada gambar atau SVG.