Generator Box Shadow CSS
Buat nilai box-shadow CSS secara visual. Pratinjau secara real-time dan salin CSS yang dihasilkan.
box-shadow: 0px 8px 16px 0px #00000033;
Cara menggunakan alat ini
- 1
Drag the X offset and Y offset sliders (each from -50px to 50px) to move the shadow horizontally and vertically.
- 2
Adjust the Blur slider (0px to 100px) to soften the edges, and the Spread slider (-50px to 50px) to grow or shrink the shadow.
- 3
Pick a shadow color with the color swatch; the live preview square updates as you change any control.
- 4
Copy the generated box-shadow declaration from the output box at the bottom and paste it into your stylesheet.
Apa itu Generator Box Shadow CSS?
Properti box-shadow pada CSS menerima offset horizontal, offset vertikal, radius blur, radius spread, dan warna. Beberapa bayangan dapat ditumpuk untuk efek berlapis. Generator visual ini menghasilkan CSS untuk kombinasi apa pun: berguna untuk tombol, kartu, dan efek kedalaman.
Kasus penggunaan umum
Designing a soft elevation shadow for buttons or cards, then tuning Y offset and blur until the depth looks right.
Prototyping a Material-style shadow by stacking the value this tool outputs with a second hand-written shadow.
Generating a tight, low-blur shadow with negative spread for a crisp focus or hover state.
Getting an exact box-shadow string to paste into a Tailwind arbitrary value, CSS module, or inline style.
Teaching the difference between blur and spread by dragging each slider and watching the preview react.
Quickly matching a shadow from a design mockup by eyeballing offsets against the live preview square.
Pertanyaan yang sering diajukan
Bagaimana cara menumpuk beberapa bayangan?▼
Apa perbedaan antara blur dan spread?▼
Alat terkait
Konverter Warna (HEX/RGB/HSL)
Konversikan warna antara format HEX, RGB, dan HSL. Pilih warna secara visual atau masukkan nilai secara manual.
Generator Gradien CSS
Buat gradien CSS linear dan radial. Pilih warna secara visual dan salin CSS yang dihasilkan.
Generator Kurva Easing Cubic Bezier
Buat kurva easing cubic-bezier untuk CSS. Termasuk preset standar.
Generator Palet Warna
Hasilkan palet warna yang harmonis dari warna dasar mana pun. Mendukung skema komplementer, analog, triadik, dan monokromatik.
Generator Border Radius CSS
Buat nilai border-radius CSS yang kompleks secara visual. Kontrol independen untuk setiap sudut.
Generator CSS Clamp()
Hasilkan nilai CSS yang fluid dan responsif dengan clamp(). Skalakan dengan mulus antara ukuran minimum dan maksimum di sepanjang rentang viewport.