Generator Box Shadow CSS
Rancang efek box-shadow secara visual dengan pratinjau waktu nyata. Tambahkan beberapa layer bayangan, sesuaikan setiap parameter, dan salin CSS.
Apa Itu Generator Box Shadow CSS?
Generator box-shadow CSS membantu Anda membuat efek bayangan untuk elemen HTML tanpa menulis kode secara manual. Anda menyesuaikan parameter seperti offset horizontal/vertikal, radius blur, spread, warna, dan opasitas menggunakan kontrol visual, dan alat ini menghasilkan nilai properti CSS yang tepat untuk Anda.
Cara Membuat Box Shadow
- Sesuaikan offset — Gunakan slider X dan Y untuk memposisikan bayangan
- Atur blur & spread — Kontrol kelembutan dan ukuran bayangan
- Pilih warna — Pilih warna bayangan dan sesuaikan opasitasnya
- Aktifkan/nonaktifkan inset — Beralih antara bayangan luar dan dalam
- Tambahkan layer — Tumpuk beberapa bayangan untuk efek kompleks
- Salin CSS — Klik tombol salin untuk mendapatkan kode akhir
Mengapa Menggunakan Generator Box Shadow Ini?
- Pengeditan Visual — Lihat perubahan bayangan secara waktu nyata pada kotak pratinjau
- Multi-Layer — Gabungkan hingga 5 layer bayangan untuk efek kedalaman
- Kontrol Presisi — Sesuaikan offset, blur, spread, opasitas, dan inset secara independen
- Output Bersih — Dapatkan CSS yang diformat dengan benar dan siap ditempel ke stylesheet Anda
- Privasi — Semuanya berjalan secara lokal di browser Anda
FreeToolbox vs Generator Shadow Lainnya
| Fitur | FreeToolbox | cssmatic.com | shadows.brumm.af |
|---|---|---|---|
| Multi-layer | Hingga 5 | Tunggal | Tidak terbatas |
| Tombol Inset | Ya | Ya | Tidak |
| Kontrol Opasitas | Ya | Terbatas | Ya |
| Iklan | Minimal | Berat | Tidak Ada |
| Tema gelap | Ya | Tidak | Ya |
Pertanyaan umum
Apa perbedaan antara blur dan spread?
Blur mengontrol seberapa lembut/tersebar tepi bayangan. Spread mengontrol seberapa besar bayangan meluas atau menyusut dari ukuran elemen. Spread positif membuatnya lebih besar, negatif membuatnya lebih kecil.
Bisakah saya menambahkan beberapa bayangan?
Ya. Klik 'Tambah Layer' untuk menumpuk hingga 5 layer bayangan. Setiap layer memiliki kontrol independen untuk semua parameter.
Apa fungsi inset?
Inset memindahkan bayangan ke dalam elemen, bukan di luar, menciptakan bayangan bagian dalam atau efek tertekan.
Apakah ini juga berfungsi untuk text-shadow?
Alat ini menghasilkan CSS box-shadow. Text-shadow menggunakan sintaks yang serupa tetapi tanpa nilai spread atau opsi inset. Anda dapat menyesuaikan output secara manual.
Apakah alat ini gratis?
Ya, sepenuhnya gratis tanpa batasan atau pendaftaran yang diperlukan.