Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Box Shadow CSS

CSS Box Shadow Generator

Setel offset, keburaman, sebaran, opasitas, dan mode inset sambil melihat hasilnya langsung pada kartu, lalu salin deklarasi box-shadow yang presisi.

Jalur tugas / dari masukan ke hasil

Posisikan bayangan

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Box Shadow CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara membuat box shadow CSS

  1. 01

    Posisikan bayangan

    Atur Offset horizontal dan Offset vertikal, masing-masing dari -80 hingga 80 px. Nilai negatif mendorong bayangan ke kiri atau ke atas; nol memusatkannya di belakang kartu. Ruang kerja terbuka pada 12 px ke kanan dan 18 px ke bawah, penempatan drop shadow klasik.

  2. 02

    Atur keburaman dan sebaran

    Sesuaikan Radius keburaman dari 0 hingga 120 px untuk kelembutan — defaultnya 32 px — dan Radius sebaran dari -40 hingga 60 px untuk membesarkan atau mengecilkan bayangan sebelum keburaman diterapkan. Sebaran default -4 px sedikit mengencangkan bayangan untuk tepi yang lebih tajam.

  3. 03

    Atur warna dan opasitas

    Pilih Warna bayangan enam digit — default #0b0d12 adalah hampir hitam — dan atur Opasitas bayangan dari 0 hingga 1 dengan kelipatan 0,01. Opasitas menjadi kanal alfa dari warna rgba() pada hasilnya, jadi 0,28 dirender sebagai rgba(11, 13, 18, 0.28).

  4. 04

    Aktifkan mode inset

    Nyalakan Bayangan inset untuk memindahkan bayangan ke dalam kotak, yang terbaca sebagai permukaan tertekan atau cekung — berguna untuk kolom input dan tombol toggle. Deklarasi yang dihasilkan menambahkan kata kunci inset di depan ketika tombolnya aktif.

  5. 05

    Bandingkan dengan contoh

    Tekan Muat contoh untuk gaya referensi yang tajam: offset 8 px di kedua sumbu tanpa keburaman dan tanpa sebaran, dalam #0f4cff pada opasitas 0,35 — garis luar offset bertepi tegas. Atur ulang mengembalikan bayangan lembut default, dan pratinjau langsung dirender ulang pada setiap perubahan.

  6. 06

    Salin atau unduh CSS

    Tekan Salin CSS untuk menyalin aturan .shadow-card, atau Unduh .css untuk menyimpannya sebagai toolars-box-shadow.css. Penyalinan diblokir selama ada nilai di luar rentang, sehingga deklarasi yang Anda tempel selalu valid.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Box Shadow CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Box Shadow CSS

Kedalaman mudah dirasakan tetapi sulit ditebak: kartu harga yang harus mengambang tepat di atas halaman, modal yang butuh kedalaman nyata, tombol yang tertekan dan terlihat inset. Menulis offset, blur, dan spread secara menebak berarti memuat ulang halaman untuk setiap geseran kecil. Generator Box Shadow CSS menunjukkan hasil yang tepat saat Anda menarik setiap slider, dari elevasi halus beropasitas 0,28 hingga garis luar offset yang tegas. Deklarasi yang disalin langsung bisa masuk ke stylesheet — semuanya dihitung secara lokal di tab ini.

Pertanyaan umum

Slider memetakan ke nilai CSS apa?
Hasilnya mengikuti urutan box-shadow: offset horizontal, offset vertikal, radius keburaman, radius sebaran, lalu warna. Opasitas bayangan menjadi kanal alfa dari warna rgba(), dan tombol Bayangan inset menambahkan kata kunci inset di depan seluruh nilai.
Apa efek radius sebaran negatif?
Radius itu mengecilkan bayangan dari semua sisi sebelum keburaman diterapkan, sehingga keburaman besar tidak bocor terlalu jauh melewati tepi elemen. Sebaran default -4 px persis trik itu: keburaman lembut 32 px yang tetap merapat ke kartu alih-alih mengembang ke luar.
Bisakah saya menumpuk beberapa bayangan dalam satu kali jalan?
Ruang kerja ini menyetel satu bayangan pada satu waktu agar setiap nilai tetap eksplisit. Untuk melapisi beberapa bayangan, salin deklarasinya, lalu ubah nilainya dan salin lagi — CSS menerima daftar bayangan yang dipisahkan koma pada satu properti, dan bayangan ambien lembut dipadukan dengan bayangan kontak yang rapat adalah kombinasi yang umum.
Kapan sebaiknya saya memakai bayangan inset?
Bayangan inset dirender di dalam border elemen, sehingga permukaannya terlihat tertekan atau cekung, bukan terangkat. Cocok untuk input teks, area cekung, dan tombol yang sedang aktif. Aktifkan Bayangan inset dan pratinjau langsung menunjukkan efeknya — aturan yang disalin cukup mendapat tambahan kata kunci inset.
Berapa rentang nilainya?
Offset horizontal dan Offset vertikal berjalan dari -80 hingga 80 px, Radius keburaman dari 0 hingga 120 px, Radius sebaran dari -40 hingga 60 px, dan Opasitas bayangan dari 0 hingga 1. Nilai di luar rentang ditandai dengan PERIKSA NILAI dan memblokir penyalinan sampai diperbaiki.
Apakah ada yang diunggah atau disimpan?
Tidak. Semuanya dirender di tab peramban ini dari nilai gaya yang tervalidasi, dan tidak ada nilai yang dihasilkan masuk ke penyimpanan, log, analitik, atau jaringan.

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat