Generator Box Shadow CSS

CSS box-shadow adalah properti CSS yang menambahkan efek bayangan di sekitar bingkai elemen. Ini memungkinkan Anda membuat bayangan drop, bayangan dalam, dan beberapa lapisan bayangan dengan menentukan offset, radius blur, radius spread, dan nilai warna.

Properti box-shadow menerima beberapa nilai: offset horizontal (X), offset vertikal (Y), radius blur, radius spread, warna, dan kata kunci inset opsional. Anda juga dapat menentukan beberapa bayangan yang dipisahkan oleh koma.

Kata kunci inset mengubah bayangan dari bayangan luar (drop shadow) menjadi bayangan dalam. Ketika inset ditentukan, bayangan digambar di dalam batas elemen alih-alih di luar, menciptakan efek inset.

Radius blur menentukan seberapa banyak tepi bayangan menjadi blur. Nilai 0 menciptakan tepi yang tajam dan padat. Nilai yang lebih besar menciptakan bayangan yang lebih menyebar dan lembut yang memanjang lebih jauh dari elemen.

Radius spread memperluas atau menyusutkan ukuran bayangan. Nilai positif membuat bayangan lebih besar dari elemen, sementara nilai negatif membuatnya lebih kecil. Ini mempengaruhi bayangan sebelum blur diterapkan.

Anda dapat membuat beberapa bayangan dengan memisahkan setiap definisi bayangan dengan koma. Setiap bayangan dapat memiliki nilai offset, blur, spread, dan warna yang berbeda. Bayangan diterapkan dalam urutan yang dideklarasikan, dengan bayangan pertama di atas.

Ya, Anda dapat menggunakan format warna CSS apa pun termasuk RGBA, HSLA, HEX, atau warna bernama. RGBA dan HSLA sangat berguna untuk menciptakan bayangan semi-transparan yang menyatu secara alami dengan latar belakang.

Cukup klik tombol "Salin Kode" di antarmuka generator. Kode CSS akan disalin ke clipboard Anda dan dapat ditempelkan langsung ke stylesheet atau file HTML Anda.

Ya, box-shadow didukung di semua browser modern termasuk Chrome, Firefox, Safari, Edge, dan Opera. Telah menjadi bagian dari CSS3 sejak 2011 dan memiliki kompatibilitas browser yang sangat baik.

box-shadow memiliki dampak kinerja yang minimal pada browser modern. Namun, menggunakan beberapa bayangan kompleks dengan radius blur besar pada banyak elemen dapat mempengaruhi kinerja rendering, terutama pada perangkat seluler.

Penggunaan umum termasuk menciptakan efek elevasi kartu, menambahkan kedalaman pada tombol, menciptakan kolom formulir inset, mengimplementasikan bayangan material design, dan menambahkan pemisahan visual antara elemen yang tumpang tindih.

Ya, box-shadow dapat dianimasikan menggunakan transisi atau animasi CSS. Namun, menganimasikan box-shadow bisa intensif kinerja. Untuk kinerja yang lebih baik, pertimbangkan menggunakan pseudo-elemen dengan transisi opacity.