Pembuat bayangan kotak
Buat properti CSS box-shadow
Lapisan bayangan
Bayangan 1
Preset bayangan
Tips bayangan
Nilai offset positif menggeser bayangan ke bawah dan ke kanan, nilai negatif menggesernya ke atas dan ke kiri.
Radius blur menentukan kelembutan bayangan; semakin tinggi nilainya, semakin menyebar bayangannya.
Radius spread memperbesar atau memperkecil ukuran bayangan.
Bayangan inset membuat bayangan dalam untuk efek kedalaman.
Beberapa bayangan dapat ditumpuk untuk efek pencahayaan yang kompleks.
Nilai opasitas yang lebih rendah menghasilkan bayangan yang lebih halus dan realistis.
Pratinjau langsung
Skala pratinjau: 100%
Deklarasi CSS
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);Kelas CSS
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (perkiraan)
shadowIni hanya saran gaya. Offset kustom, warna, inset, dan beberapa lapisan membutuhkan CSS yang dihasilkan.
Atur satu lapisan atau coba sebuah preset. Pratinjau diperbarui saat Anda bekerja.
Tentang Pembuat bayangan kotak
Dengan pembuat bayangan kotak CSS gratis ini, Anda dapat membuat efek bayangan profesional dengan kendali visual penuh. Atur offset, radius blur, radius spread, warna, dan opasitas lewat slider yang intuitif dan lihat hasilnya diperbarui secara real time. Susun beberapa bayangan berlapis untuk efek kedalaman yang kompleks yang membuat elemen UI Anda menonjol.
Bayangan sangat penting untuk membangun hierarki visual dan kedalaman pada antarmuka web modern. box-shadow yang dibuat dengan baik dapat membuat kartu tampak melayang di atas halaman, tombol terasa interaktif, dan elemen navigasi menonjol dari latar belakang. Alat ini menghilangkan cara coba-coba saat menulis nilai box-shadow secara manual.
Pembuat ini mendukung bayangan luar dan bayangan inset, beberapa lapisan bayangan, serta menyertakan 6 templat preset untuk gaya bayangan umum. Hasilnya berupa kode CSS dengan tombol salin sekali klik, disertai perkiraan saran kelas utilitas Tailwind CSS. Semua pemrosesan berlangsung di browser Anda tanpa data dikirim ke server mana pun.
Fitur utama
- Beberapa lapisan bayangan yang dapat ditambahkan, dihapus, dan dikonfigurasi satu per satu
- Kontrol slider presisi untuk offset X, offset Y, radius blur, dan radius spread
- Pemilih warna dengan input hex dan opasitas yang dapat diatur untuk setiap lapisan bayangan
- Sakelar bayangan inset untuk menciptakan kedalaman dalam dan efek timbul
- 6 templat bayangan preset: Halus, Sedang, Besar, Ekstra besar, Dalam, dan Ganda
- Pembuat bayangan acak untuk menemukan kombinasi bayangan yang kreatif
- Pratinjau langsung real time dengan warna elemen yang dapat disesuaikan
- Salin ke papan klip sekali klik dengan keluaran CSS yang bersih
- Keluaran format alternatif, termasuk kelas CSS dan perkiraan utilitas Tailwind CSS
- Dukungan mode gelap penuh untuk pengeditan yang nyaman dalam kondisi pencahayaan apa pun
Cara menggunakan Pembuat bayangan kotak
- Tambahkan lapisan bayangan: Mulai dari bayangan default atau klik Tambah untuk membuat lapisan bayangan tambahan bagi efek yang kompleks.
- Atur properti bayangan: Gunakan slider untuk mengatur offset X/Y, radius blur, radius spread, warna, dan opasitas untuk setiap lapisan bayangan.
- Aktifkan inset: Centang kotak Inset pada lapisan bayangan mana pun untuk membuat efek bayangan dalam, bukan bayangan luar.
- Pratinjau hasil: Lihat elemen pratinjau langsung untuk melihat persis seperti apa bayangan Anda. Ubah warna elemen pratinjau jika perlu.
- Coba preset: Klik salah satu dari 6 templat preset untuk dengan cepat menerapkan gaya bayangan umum sebagai titik awal.
- Salin CSS: Klik tombol Salin untuk menyalin deklarasi CSS box-shadow lengkap ke papan klip Anda.
Kasus penggunaan
- Elevasi kartu: Tambahkan kedalaman pada komponen kartu agar tampak melayang di atas latar belakang halaman.
- Status hover tombol: Buat transisi bayangan untuk tombol yang merespons interaksi pengguna secara visual.
- Gaya modal dan dialog: Terapkan bayangan besar dan lembut pada modal dan kotak dialog agar terpisah jelas dari latar belakang.
- Dropdown navigasi: Beri gaya pada menu dropdown dan popover dengan bayangan yang menyampaikan kesan lapisan dan kedalaman.
- Efek fokus input: Gunakan bayangan berwarna sebagai indikator fokus untuk input formulir dan elemen interaktif.
- Efek inset: Buat tampilan tertekan atau timbul untuk tombol sakelar, status aktif, dan elemen dekoratif.
- Desain neumorphism: Gabungkan beberapa bayangan terang dan gelap untuk mencapai estetika desain soft UI yang populer.
- Pembingkaian gambar: Tambahkan bayangan halus pada gambar dan wadah media untuk tampilan galeri yang rapi.
Pertanyaan yang sering diajukan
Apakah alat ini gratis?
Ya, Pembuat bayangan kotak sepenuhnya gratis tanpa batas jumlah bayangan yang dapat Anda buat. Tidak perlu registrasi atau pembayaran.
Apakah data saya aman?
Seluruh pembuatan dan pratinjau bayangan berlangsung sepenuhnya di browser Anda. Tidak ada data yang dikirim ke server eksternal mana pun, sehingga konfigurasi dan keluaran CSS Anda tetap sepenuhnya privat.
Apa perbedaan antara radius blur dan radius spread?
Radius blur mengatur seberapa lembut atau menyebar bayangan tampak, nilai yang lebih tinggi menghasilkan pudar yang lebih bertahap. Radius spread memperluas (nilai positif) atau menyusutkan (nilai negatif) ukuran bayangan relatif terhadap elemen.
Bisakah saya menggunakan beberapa bayangan pada satu elemen?
Ya, CSS mendukung beberapa box-shadow yang dipisahkan koma. Alat ini memungkinkan Anda menambahkan beberapa lapisan bayangan dan menggabungkannya secara otomatis menjadi satu deklarasi box-shadow.
Apa itu bayangan inset?
Bayangan inset dirender di dalam elemen, bukan di luar, sehingga menciptakan tampilan menjorok atau tertekan. Bayangan ini umum dipakai untuk kolom input, status tombol aktif, dan desain neumorphism.
Apakah box-shadow didukung di semua browser?
Ya, properti box-shadow didukung penuh di semua browser modern termasuk Chrome, Firefox, Safari, Edge, dan Opera. Awalan vendor tidak diperlukan.
Tips & praktik terbaik
- Jaga bayangan tetap halus: Opasitas rendah (5-15%) dan blur sedang menghasilkan bayangan yang realistis dan profesional serta tidak mendominasi desain.
- Gunakan spread negatif: Radius spread negatif yang kecil membuat bayangan tampak lebih rapat dan terfokus di bawah elemen.
- Susun beberapa bayangan: Gabungkan bayangan yang rapat dan gelap dengan bayangan yang lebih lebar dan terang untuk kedalaman yang tampak alami, mirip pencahayaan di dunia nyata.
- Samakan sumber cahaya: Jaga arah offset tetap konsisten di seluruh desain Anda untuk mensimulasikan satu sumber cahaya yang koheren.
- Perhatikan performa: Nilai blur yang besar pada banyak elemen dapat memengaruhi performa rendering, terutama di perangkat seluler.
- Gunakan bayangan untuk hierarki: Elevasi yang lebih tinggi (offset dan blur lebih besar) menandakan elemen yang lebih dekat dengan pengguna dalam tumpukan visual.