Generator Box Shadow CSS

Tentang Generator Box Shadow CSS

Generator Box Shadow CSS memungkinkan Anda mendesain efek box-shadow secara visual dan menyalin CSS siap produksi secara instan. Tumpuk beberapa lapisan bayangan, pilih dari preset kurasi yang terinspirasi oleh Material Design, Tailwind CSS, dan Neumorphism, atau seret langsung pada pratinjau untuk memposisikan bayangan Anda. Semuanya berjalan di browser Anda — kode Anda tidak pernah meninggalkan halaman.

Cara Menggunakan Generator Box Shadow CSS

1. Sesuaikan kontrol bayangan — Gunakan slider untuk mengatur offset horizontal (X), offset vertikal (Y), radius blur, dan radius penyebaran. Anda juga dapat menyeret langsung pada area pratinjau untuk memposisikan bayangan secara intuitif.
2. Pilih warna dan opasitas — Pilih warna bayangan dengan pemilih warna dan sempurnakan transparansi dengan slider opasitas. Pratinjau diperbarui secara real time.
3. Tambahkan beberapa lapisan atau preset — Klik + Tambah Lapisan Bayangan untuk menumpuk bayangan guna mendapatkan kedalaman yang realistis. Atau pilih preset pilihan (Material, Tailwind, Neumorphism, dll.) untuk memulai dengan desain yang terbukti bagus.
4. Salin CSS — Klik Salin untuk mengambil kode box-shadow yang dihasilkan dan tempelkan langsung ke stylesheet Anda.

Memahami Sintaks box-shadow

Tips untuk Box Shadow Profesional

• Lapiskan beberapa bayangan — Objek di dunia nyata menghasilkan bayangan yang kompleks. Menggunakan 2-3 lapisan (lapisan ambient lembut + lapisan cahaya kunci yang lebih tajam) menghasilkan hasil yang jauh lebih realistis daripada satu bayangan saja.
• Gunakan opasitas rendah — Bayangan dengan opasitas 8-20% terlihat alami. Hindari bayangan hitam dengan opasitas tinggi, yang dapat terlihat kasar dan ketinggalan zaman.
• Sesuaikan arah cahaya — Pastikan offset bayangan konsisten di seluruh UI Anda untuk mensimulasikan satu sumber cahaya. Bayangan yang tidak konsisten merusak ilusi visual.
• Bayangan berwarna — Alih-alih hitam, cobalah gunakan warna yang lebih gelap dari warna latar belakang elemen untuk tampilan yang lebih menyatu dan modern.
• Spread negatif — Nilai spread negatif mengecilkan bayangan lebih kecil dari elemen, menciptakan bayangan kontak halus yang membumikan elemen tanpa tepi yang terlihat jelas.

Gaya Bayangan Populer Dijelaskan

• Material Design Elevation — Menggunakan dua lapisan bayangan: bayangan ambient yang lebih lembut dan bayangan kunci yang lebih tajam. Tingkat elevasi yang berbeda (1-5) meningkatkan offset dan blur secara progresif.
• Tailwind CSS Utilities — Tailwind menyediakan kelas shadow, shadow-md, shadow-lg, shadow-xl, dan shadow-2xl, masing-masing menggunakan bayangan dua lapis yang dioptimalkan untuk kartu umum dan modal.
• Neumorphism — Menciptakan efek plastik ekstrusi yang lembut menggunakan dua bayangan yang berlawanan (satu terang, satu gelap). Paling baik digunakan pada latar belakang abu-abu terang di mana kedua bayangan terlihat jelas.
• Glassmorphism — Memasangkan bayangan halus dengan backdrop-filter blur dan latar belakang semi-transparan. Bayangan menambahkan kedalaman di bawah efek kaca buram.

Pertanyaan yang Sering Diajukan

Apa itu properti CSS box-shadow?

Properti CSS box-shadow menambahkan efek bayangan di sekitar bingkai elemen. Ini menerima nilai untuk offset horizontal, offset vertikal, radius blur, radius penyebaran, dan warna. Beberapa bayangan dapat dipisahkan dengan koma untuk menciptakan efek kedalaman berlapis.

Bagaimana cara membuat beberapa box shadow di CSS?

Beberapa box shadow dibuat dengan memisahkan setiap definisi bayangan dengan koma. Contohnya: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Setiap bayangan dirender di atas bayangan sebelumnya, dengan bayangan pertama muncul di paling atas.

Apa perbedaan antara box-shadow dan drop-shadow?

box-shadow menerapkan bayangan pada kotak persegi panjang elemen, sedangkan filter: drop-shadow() mengikuti bentuk sebenarnya termasuk area transparan. box-shadow mendukung radius penyebaran dan mode inset, yang tidak dimiliki drop-shadow. Untuk elemen persegi panjang standar, box-shadow lebih umum digunakan dan kinerjanya lebih baik.

Apa itu inset box shadow?

Inset box shadow muncul di dalam elemen, bukan di luar. Ini dibuat dengan menambahkan kata kunci inset sebelum nilai bayangan. Bayangan inset biasanya digunakan untuk efek tombol yang ditekan, gaya input field, dan menciptakan tampilan cekung atau terukir.

Apa nilai box-shadow yang bagus untuk efek kartu yang halus?

Bayangan kartu halus yang populer menggunakan dua lapisan: 0 1px 3px rgba(0,0,0,0.12) untuk bayangan dekat dan 0 1px 2px rgba(0,0,0,0.24) untuk definisi. Tailwind CSS menggunakan 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) untuk utilitas bayangan defaultnya.