Generator Box Shadow CSS
Generator box-shadow CSS online gratis. Buat bayangan indah secara visual dengan offset, blur, spread, warna, dan inset yang dapat disesuaikan. Pratinjau langsung dan salin kode instan.
Apa itu CSS box-shadow?
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.
Apa parameter box-shadow?
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.
Apa itu kata kunci inset?
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.
Apa itu radius blur?
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.
Apa itu radius spread?
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.
Bagaimana cara membuat beberapa bayangan?
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.
Bisakah saya menggunakan warna RGBA untuk bayangan?
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.
Bagaimana cara menyalin kode CSS yang dihasilkan?
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.
Apakah box-shadow didukung di semua browser?
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.
Apakah box-shadow mempengaruhi kinerja?
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.
Apa kasus penggunaan umum untuk box-shadow?
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.
Bisakah saya menganimasikan box-shadow?
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.
Cara Menggunakan Generator Box Shadow CSS
Rancang bayangan CSS box-shadow secara visual tanpa menebak-nebak angka. Generator ini berjalan lokal di browser Anda dan tidak ada input yang diunggah.
- Atur H-Offset dan V-Offset untuk menggerakkan bayangan secara horizontal dan vertikal.
- Naikkan Blur untuk melembutkan tepi dan gunakan Spread untuk memperbesar atau memperkecil bayangan.
- Pilih Color dan sesuaikan Opacity agar bayangan terlihat lebih lembut dan alami.
- Centang Inset untuk menggambar bayangan di dalam elemen, bukan di luarnya.
- Salin aturan box-shadow yang sudah jadi dari pratinjau ke stylesheet Anda.
Blur kecil dipadukan dengan V-Offset positif yang kecil menghasilkan bayangan kontak halus dan realistis tepat di bawah elemen.
Alat Terkait
- Generator Border Radius CSS Generator border-radius CSS visual. Sesuaikan setiap sudut secara independen dengan pratinjau real-time dan salin kode CSS secara instan.
- Generator Gradien CSS Buat gradien CSS menakjubkan secara visual. Hasilkan gradien linear, radial dan konikal dengan beberapa color stop, sudut dan posisi kustom. Salin kode CSS siap produksi secara instan.
- Generator CSS Grid Generator CSS Grid visual gratis dengan pratinjau langsung. Desain tata letak grid responsif secara interaktif dan ekspor kode CSS siap produksi.
- Generator CSS Flexbox Generator CSS Flexbox visual dengan pratinjau langsung. Sesuaikan properti flex dan dapatkan kode CSS siap pakai.
- Generator Border Radius Kreatif Generator border radius kreatif gratis online. Seret 8 pegangan atau pilih prasetel blob untuk membuat bentuk CSS organik dan menyalin kodenya seketika.
- Konverter Warna Konverter warna online gratis. Konversi format HEX, RGB, HSL, HSV secara instan dengan pemilih visual. 100% pribadi, berjalan di browser Anda.
- Generator Easing CSS Generator easing CSS online gratis. Geser titik kendali cubic-bezier pada kurva interaktif, pilih dari 18 preset, lihat pratinjau bola berulang, dan salin fungsi timing seketika.
- Generator Text Shadow CSS Generator text-shadow CSS online gratis. Tumpuk beberapa lapisan bayangan dengan offset, blur, warna, dan opasitas, coba preset Neon, 3D, Retro, dan salin CSS-nya seketika.