Menu Toolsenin
Kategori Alat
Informasi & Bantuan
Beranda Web Dev & Desain CSS Box Shadow & Glassmorphism Generator

CSS Box Shadow & Glassmorphism Generator

Desain efek bayangan CSS (box-shadow) dan efek kaca buram modern (glassmorphism backdrop blur) dengan salin kode instan.

Parameter Bayangan CSS
Pratinjau Elemen Visual
Elemen Kotak
Kode CSS: 
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.15);
IKLAN / SPONSOR
Ruang Iklan Terverifikasi Google AdSense Responsif, ramah pengguna, dan memenuhi pedoman IAB (Interactive Advertising Bureau).
Slot Iklan

Sintaks & Struktur Properti CSS `box-shadow`

Properti box-shadow pada CSS3 digunakan untuk memberikan kedalaman visual (*elevation*) pada elemen kartu, tombol, atau modal di situs web. Sintaks lengkapnya adalah:

box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color];
  • Offset-X: Jarak pergeseran bayangan secara horizontal (positif ke kanan, negatif ke kiri).
  • Offset-Y: Jarak pergeseran bayangan secara vertikal (positif ke bawah, negatif ke atas).
  • Blur-Radius: Tingkat keburaman bayangan (semakin besar angkanya, semakin halus dan menyebar bayangannya).
  • Spread-Radius: Memperbesar atau mengecilkan ukuran dimensi bayangan relatif terhadap ukuran kotak elemen asli.
IKLAN / SPONSOR
Ruang Iklan Terverifikasi Google AdSense Responsif, ramah pengguna, dan memenuhi pedoman IAB (Interactive Advertising Bureau).
Slot Iklan

FAQ CSS Shadow

Bagaimana cara membuat efek bayangan lembut modern (*smooth shadow*)?
Kuncinya adalah menggunakan opacity yang rendah (antara 0.05 hingga 0.15), nilai blur radius yang tinggi (15px - 30px), dan spread radius bernilai negatif (-3px hingga -6px) agar bayangan tidak terlihat kotor di tepi elemen.