Box Shadow Generator

Geser slider untuk membentuk box-shadow, tumpuk beberapa lapisan untuk efek kedalaman, dan salin kode CSS instan.

Lapisan bayangan
Lapisan 1
CSS
Sesuaikan slider untuk mengatur bayangan.

Setiap bayangan dirender langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo.

Tanya Jawab

Apa sebenarnya yang dikontrol oleh offset, blur, dan spread?

Offset menggeser bayangan ke kiri/kanan dan atas/bawah, blur memperlembut tepiannya, dan spread memperbesar atau memperkecil ukuran bayangan sebelum diburamkan. Nilai spread negatif akan menarik bayangan ke dalam, berguna untuk membuat bayangan yang rapat dan dekat.

Apa fungsi dari opsi inset?

Bayangan normal jatuh di luar elemen, seperti cahaya di belakang kartu yang melayang. Opsi Inset membaliknya ke dalam elemen, sehingga elemen terlihat menjorok ke dalam — sangat berguna untuk kolom input atau tombol yang ditekan.

Mengapa kita perlu menumpuk lebih dari satu lapisan bayangan?

Satu bayangan saja akan terlihat datar jika ukurannya terlalu besar. Efek elevasi yang realistis biasanya menggabungkan bayangan tipis yang gelap dengan bayangan lembut yang lebih lebar — tambahkan lapisan kedua dan sesuaikan masing-masing secara terpisah untuk mendapatkan efek tersebut.

Ditulis dan ditinjau oleh tim editorial BroBroGo.Terakhir diperbarui:

Fungsi Utama Box Shadow Generator

Alat ini memungkinkan Anda untuk membuat bayangan kotak kustom untuk elemen desain dengan menyesuaikan berbagai properti menggunakan slider. Anda dapat menumpuk beberapa lapisan bayangan untuk mencapai efek visual yang kompleks dan menyalin kode CSS yang dihasilkan secara instan untuk digunakan dalam proyek Anda.

Setiap bayangan dirender langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo.

Mengatur Properti Bayangan Melalui Input

Alat ini menyediakan berbagai kontrol input untuk menyesuaikan tampilan bayangan secara presisi:

  • Offset horizontal: Slider untuk menggeser bayangan ke kiri atau kanan, dengan rentang dari -50px hingga 50px.
  • Offset vertikal: Slider untuk menggeser bayangan ke atas atau bawah, dengan rentang dari -50px hingga 50px.
  • Blur: Slider untuk memperlembut tepian bayangan, dengan rentang dari 0px hingga 100px.
  • Spread: Slider untuk memperbesar atau memperkecil ukuran bayangan sebelum diburamkan, dengan rentang dari -50px hingga 50px. Nilai spread negatif akan menarik bayangan ke dalam.
  • Warna bayangan: Pemilih warna untuk menentukan warna dari bayangan.
  • Opasitas: Slider untuk menyesuaikan tingkat transparansi bayangan.
  • Bayangan inset: Sebuah sakelar (toggle) untuk membuat bayangan muncul di dalam elemen.
  • Tambah lapisan: Tombol untuk menambahkan lapisan bayangan tambahan.
  • Hapus lapisan: Tombol untuk menghapus lapisan bayangan yang dipilih.

Memahami Output yang Dihasilkan

Setiap perubahan yang Anda lakukan pada slider Offset horizontal, Offset vertikal, Blur, dan Spread akan memperbarui output CSS secara real-time. Output yang ditampilkan oleh alat ini meliputi:

  • Lapisan: Label untuk setiap lapisan bayangan individual.
  • Offset horizontal: Nilai saat ini dari pergeseran horizontal untuk suatu lapisan.
  • Offset vertikal: Nilai saat ini dari pergeseran vertikal untuk suatu lapisan.
  • Blur: Nilai keburaman saat ini untuk suatu lapisan.
  • Spread: Nilai penyebaran saat ini untuk suatu lapisan.
  • Warna bayangan: Warna terpilih untuk suatu lapisan.
  • Opasitas: Nilai opasitas saat ini untuk suatu lapisan.
  • Bayangan inset: Status saat ini (aktif/nonaktif) dari opsi inset untuk suatu lapisan.
  • CSS: Kode CSS yang dihasilkan untuk properti box-shadow.

Aturan Penggunaan dan Perilaku Lapisan

Alat ini memiliki aturan default dan perilaku khusus untuk memudahkan proses desain Anda:

  • Pratampilan Awal: Alat ini secara otomatis menyediakan lima lapisan yang telah dirender sebelumnya. Lapisan pertama memiliki nilai default 0 8 24 -4 dengan warna hitam transparan 18%, sedangkan lapisan lainnya pada awalnya disembunyikan.
  • Menambah Lapisan: Saat Anda menekan tombol untuk menambah lapisan, lapisan bayangan baru akan dibuat dengan nilai default.
  • Menghapus Lapisan: Menghapus lapisan akan melenyapkan lapisan bayangan yang sedang Anda pilih.
  • Output Multi-lapisan: Ketika terdapat beberapa lapisan aktif, kode CSS yang dihasilkan akan mencantumkan nilai-nilai lapisan tersebut yang dipisahkan oleh tanda koma.
  • Efek Inset: Mengaktifkan opsi "Bayangan inset" akan membalikkan arah bayangan sehingga masuk ke dalam elemen.

Target Pengguna dan Kebutuhan Desain

Alat ini dirancang untuk memenuhi kebutuhan spesifik dalam pembuatan kode CSS:

  • Seseorang yang ingin merancang properti box-shadow untuk elemen web.
  • Pengguna yang perlu membuat bayangan yang tipis dan rapat.
  • Pengguna yang ingin membuat bayangan yang lembut dan lebih lebar.
  • Seseorang yang ingin membuat elemen terlihat menjorok ke dalam, seperti kolom input atau tombol yang ditekan.
  • Desainer atau pengembang front-end yang perlu menumpuk beberapa lapisan bayangan untuk menciptakan efek kedalaman yang realistis.

FAQ (Pertanyaan yang Sering Diajukan)

Apa sebenarnya yang dikontrol oleh offset, blur, dan spread? Offset menggeser bayangan ke kiri/kanan dan atas/bawah, blur memperlembut tepiannya, dan spread memperbesar atau memperkecil ukuran bayangan sebelum diburamkan. Nilai spread negatif akan menarik bayangan ke dalam, berguna untuk membuat bayangan yang rapat dan dekat.

Apa fungsi dari opsi inset? Bayangan normal jatuh di luar elemen, seperti cahaya di belakang kartu yang melayang. Opsi Inset membaliknya ke dalam elemen, sehingga elemen terlihat menjorok ke dalam — sangat berguna untuk kolom input atau tombol yang ditekan.

Mengapa kita perlu menumpuk lebih dari satu lapisan bayangan? Satu bayangan saja akan terlihat datar jika ukurannya terlalu besar. Efek elevasi yang realistis biasanya menggabungkan bayangan tipis yang gelap dengan bayangan lembut yang lebih lebar — tambahkan lapisan kedua dan sesuaikan masing-masing secara terpisah untuk mendapatkan efek tersebut.

CSS Cubic Bezier GeneratorGeser kedua handle untuk membentuk kurva easing, saksikan pergerakan titik animasi dibanding gerakan konstan, lalu salin nilai cubic-bezier().Gradient GeneratorBuat gradien linear, radial, atau conic, tambahkan color stops dan tentukan arahnya, lalu salin kode CSS dalam sekali klik.Border Radius GeneratorBulatkan setiap sudut dengan slider, buat bentuk blob organik dengan mode elips, dan salin CSS secara instan.Flexbox GeneratorAtur kontainer flex dan item di dalamnya dengan kontrol visual, lihat perubahan tata letak secara langsung, dan salin kode CSS dalam sekali klik.CSS Grid GeneratorAtur kolom dan baris Anda, seret kursor melewati sel untuk menempatkan item, lalu salin kode CSS grid beserta HTML yang cocok dalam sekali klik.Kalkulator CSS clamp()Masukkan ukuran untuk layar kecil dan besar, lalu dapatkan nilai clamp() dinamis yang berskala mulus di antaranya — cocok untuk ukuran font, padding, margin, atau gap.Konverter WarnaKonversi warna antara HEX, RGB, HSL, HSV, CMYK, dan LAB — cukup edit satu kolom dan kolom lainnya akan langsung menyesuaikan.CSS Beautifier & MinifierRapikan kembali CSS yang berantakan agar mudah dibaca, atau minify untuk memperkecil ukurannya — lengkap dengan mode aman yang tidak akan mengubah urutan aturan Anda.Pemeriksa KontrasMasukkan warna teks dan latar belakang untuk melihat rasio kontras WCAG serta tingkat kelulusan AA dan AAA.