☁️

css-box-shadow-generator,

Generator CSS box-shadow

Hasilkan bayangan CSS (box-shadow) lanjutan dengan UI yang intuitif.
Alat gratis yang mendukung banyak lapisan dan tren desain terbaru.

🥞

Banyak lapisan

Tumpuk beberapa bayangan untuk ekspresi yang kaya

🎨

Prasetel

Terapkan langsung Neumorphism, dll.

⚡

Dukungan Tailwind

Mendukung output CSS standar dan Tailwind

Pengaturan lapisan

Parameter bayangan

Offset X (px) 0px

Offset Y (px) 4px

Buram (px) 12px

Sebar (px) 0px

Warna bayangan

Opasitas (%) 10%

Bayangan dalam (inset)

Pratinjau

BOX

Width

120px

Height

120px

Border Radius

12px

Warna latar

Warna kotak

Tentang

Generator CSS box-shadow adalah alat gratis yang membuat gaya bayangan esensial (box-shadow) untuk desain web dengan UI yang intuitif.

Bukan hanya bayangan sederhana, tetapi juga bayangan kaya dengan banyak lapisan, bayangan halus seperti yang digunakan oleh Apple dan layanan web modern, Neumorphism 3D, dan Neo Brutalism datar dapat dibuat secara instan dari prasetel.

Kode yang dihasilkan dapat di-output dalam tiga format: properti CSS standar, variabel CSS (properti kustom), dan kelas utilitas Tailwind CSS (mendukung nilai arbitrer), serta dapat disalin dengan satu klik.

Cara menggunakan

1 Pilih dasar

Pilih prasetel dari atas yang mendekati gambar yang ingin Anda buat. Tentu saja, Anda juga dapat membangun dari awal dengan menambahkan lapisan.

2 Sesuaikan bayangan

Sesuaikan offset X/Y (posisi), kekuatan buram, sebar, warna, dan opasitas. Dengan menumpuk banyak bayangan menggunakan "Tambah lapisan", Anda dapat membuat bayangan yang lebih alami dan mewah.

3 Salin kode

Pilih "CSS" atau "Tailwind" dari panel keluaran sesuai dengan lingkungan Anda, dan tekan tombol papan klip untuk menyalin kode.

Properti

Sintaks dan properti box-shadow


box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y: Posisi horizontal dan vertikal bayangan. Nilai positif memindahkan bayangan ke kanan/bawah, nilai negatif memindahkannya ke kiri/atas.
blur-radius (buram): Keburaman bayangan. Semakin besar nilainya, semakin lebar dan tipis bayangan menyebar. Pada nilai 0, ia menjadi batas yang tajam (bayangan padat).
spread-radius (sebar): Memperluas atau mengecilkan ukuran bayangan itu sendiri. Nilai positif menghasilkan bayangan yang lebih besar dari elemen, nilai negatif menghasilkan bayangan yang lebih kecil.
inset (bayangan dalam): Jika kata kunci ini ditentukan, bayangan akan jatuh di dalam elemen, bukan di luar. Digunakan untuk mengekspresikan UI yang menjorok.

FAQ

Q. Apakah box-shadow memengaruhi kinerja?

A.Bayangan buram besar dan beberapa lapisan mahal untuk digambar, sehingga rendering mungkin menjadi lamban di perangkat seluler. Perhatian khusus diperlukan saat menganimasikan box-shadow.

Q. Apa perbedaan antara box-shadow dan filter: drop-shadow?

A.box-shadow menerapkan bayangan pada kotak (persegi panjang) elemen. Di sisi lain, filter: drop-shadow() menghasilkan bayangan untuk bentuk elemen yang buram (seperti garis luar PNG transparan).

Q. Dalam ekspresi apa inset digunakan?

A.Ini digunakan untuk status tombol yang ditekan (efek lekukan), bayangan dalam kolom teks, penyorotan dalam Neumorphism, dll.

Q. Apa manfaat dari menumpuk beberapa bayangan?

A.Menumpuk beberapa lapisan dapat mengekspresikan kedalaman yang lebih alami dan realistis daripada satu bayangan buram. Misalnya, menumpuk bayangan dekat (kecil dan gelap) dan bayangan jauh (besar dan terang) adalah teknik umum.

Kasus penggunaan

UI Kartu dan modal

Membuat elemen menonjol dari latar belakang, secara visual menyampaikan kepada pengguna bahwa elemen tersebut dapat diklik atau merupakan konten penting.

Status tombol hover/active

Dengan menyebarkan bayangan saat mouse diarahkan atau beralih ke `inset` saat diklik, Anda dapat mengimplementasikan tombol interaktif dengan sensasi ditekan.

Desain Neumorphism

Dengan menempatkan bayangan terang dan gelap secara diagonal pada elemen berwarna sama dengan latar belakang, Anda menciptakan tekstur yang membuat elemen tampak menonjol atau menjorok ke dalam.