Generator Bayangan CSS
Buat bayangan CSS
Cara menggunakan Generator Bayangan CSS
Buat bayangan CSS Alat online gratis, tanpa pendaftaran, tanpa iklan mengganggu. Gunakan sekarang.
Di mana shadow CSS digunakan?
Shadow menambahkan kedalaman, elevasi, dan hierarki visual pada antarmuka. Material Design Google, Human Interface Guidelines Apple, dan sebagian besar design system modern menggunakan shadow secara sistematis untuk mengomunikasikan elemen mana yang "lebih dekat" ke pengguna — menciptakan rasa tiga dimensi pada antarmuka datar.
- Elevasi kartu: Shadow halus pada komponen kartu membuatnya melayang di atas latar, menunjukkan bahwa kartu tersebut adalah unit konten yang interaktif atau mandiri. Shadow lebih dalam menunjukkan elevasi lebih tinggi.
- Shadow modal dan dropdown: Overlay (modal, dropdown menu, tooltip) menggunakan shadow kuat untuk menunjukkan bahwa mereka melayang di atas konten halaman — menciptakan hierarki kedalaman visual yang jelas bagi pengguna.
- Indikator fokus: box-shadow dapat menggantikan outline untuk status fokus:
box-shadow: 0 0 0 3px rgba(0,112,243,0.4)membuat ring fokus visual tanpa memengaruhi layout — umum digunakan dalam design system yang mengutamakan aksesibilitas. - Keterbacaan teks: Text-shadow halus pada teks putih di atas gambar memastikan keterbacaan terlepas dari konten gambar latar — memungkinkan teks tetap terbaca tanpa overlay warna solid yang menutupi gambar.
- Efek neumorphism: Gaya desain neumorphic menggunakan dua shadow (shadow terang di satu sisi, shadow gelap di sisi lain) untuk menciptakan efek 3D yang tampak menonjol atau terbenam dari latar belakang.
Sintaks box-shadow: box-shadow: [inset] offset-x offset-y blur-radius spread color. Beberapa shadow dapat ditumpuk: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05) menciptakan shadow berlapis yang lebih alami, meniru pencahayaan nyata.
Frequently Asked Questions
Apa perbedaan box-shadow dan drop-shadow()?
box-shadow diterapkan pada kotak persegi panjang elemen. Ia tidak mengikuti bentuk tidak beraturan seperti gambar PNG dengan latar transparan. Fungsi filter CSS drop-shadow() mengikuti bentuk yang sebenarnya dirender termasuk area transparan. Gunakan drop-shadow() untuk ikon dan gambar dengan transparansi; gunakan box-shadow untuk kartu, tombol, dan elemen persegi panjang.
Apa yang dilakukan kata kunci inset?
Kata kunci inset membuat shadow muncul dari dalam elemen, bukan dari luar. Shadow inset menciptakan tampilan elemen yang tertekan atau terbenam — berguna untuk tombol yang ditekan, input field (efek kedalaman dalam), atau elemen UI neumorphic yang terbenam.
Apa itu spread radius pada box-shadow?
Nilai keempat box-shadow adalah spread radius. Ia memperbesar atau memperkecil shadow. Nilai positif membuat shadow lebih besar dari elemen; nilai negatif lebih kecil. Menetapkan offset-x dan offset-y ke 0 dengan spread positif menciptakan efek outline/glow seragam di sekitar elemen.
Mengapa shadow terlihat berbeda di Safari dan Chrome?
Perbedaan rendering shadow antar browser biasanya disebabkan oleh perbedaan rendering subpiksel dan koreksi gamma. Safari dan Chrome menggunakan algoritma komposisi yang sedikit berbeda. Untuk hasil konsisten antar browser, gunakan warna RGBA dengan nilai alpha eksplisit daripada opacity, dan uji shadow di kedua engine rendering.
Berapa banyak shadow yang bisa ditumpuk?
Tidak ada batas ketat. Beberapa box-shadow dapat ditumpuk dalam daftar yang dipisahkan koma. Beberapa shadow yang ditumpuk dengan blur radius dan opacity berbeda menciptakan shadow yang terlihat lebih alami, meniru pencahayaan dunia nyata. Material Design mendefinisikan resep shadow berlapis spesifik untuk setiap tingkat elevasi.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow menambahkan shadow di luar kotak elemen (atau dalam dengan inset), tidak memengaruhi layout. outline menggambar garis di luar border — sering digunakan sebagai indikator fokus aksesibel. border menambahkan garis di dalam elemen dan memengaruhi layout. filter: drop-shadow() mengikuti bentuk yang dirender termasuk transparansi. Gunakan box-shadow untuk elevasi dan kedalaman UI; outline atau box-shadow untuk ring fokus; drop-shadow() untuk shadow ikon.