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.

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.