Pembuat Bayangan Kotak CSS
Hasilkan deklarasi box-shadow CSS dari nilai offset, blur, spread, warna dan opacity, dengan inset opsional — salin bayangan rgba() yang siap pakai ke dalam stylesheet Anda.
Input
Digabungkan dengan warna bayangan menjadi nilai rgba().
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-box-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"offsetX": "4",
"offsetY": "4",
"blurRadius": "10",
"spreadRadius": "0",
"color": "#000000",
"opacity": "25",
"inset": ""
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-box-shadow-generator` tool (CSS Box Shadow Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-box-shadow-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Bayangan Kotak CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Yang dilakukan
Pembuat Bayangan Kotak CSS mengubah serangkaian slider dan pemilih warna menjadi
deklarasi CSS box-shadow yang siap ditempel. Sesuaikan offset horizontal dan
vertikal, radius blur, radius spread, warna bayangan dan opacity, dan
secara opsional ubah bayangan menjadi bayangan inset (dalam) — CSS yang dihasilkan
diperbarui secara instan saat Anda menggerakkan setiap kontrol.
Sintaks box-shadow
Deklarasi CSS box-shadow mengikuti bentuk ini:
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;- offset-x — seberapa jauh bayangan didorong secara horizontal. Nilai positif mendorongnya ke kanan, nilai negatif mendorongnya ke kiri.
- offset-y — seberapa jauh bayangan didorong secara vertikal. Nilai positif mendorongnya ke bawah, nilai negatif mendorongnya ke atas.
- blur-radius — seberapa lembut tepi bayangan.
0memberikan bayangan dengan tepi tajam; nilai yang lebih besar menyebarkan blur lebih jauh dan tidak bisa negatif. - spread-radius — menumbuhkan (positif) atau menyusutkan (negatif) bayangan sebelum blur diterapkan. Opsional dalam CSS mentah, tetapi selalu disertakan di sini untuk deklarasi yang sepenuhnya eksplisit.
- color — warna bayangan, dikeluarkan sebagai
rgba(r, g, b, a)sehingga saluran alfa menangkap slider opacity bersama dengan nilai RGB. - inset — kata kunci opsional, ditempatkan sebelum offset, yang membalikkan bayangan untuk dirender di dalam perbatasan elemen alih-alih di luarnya (tampilan "tertindas" atau "diukir").
Beberapa bayangan dapat ditumpuk dengan memisahkan deklarasi dengan koma
(box-shadow: a, b, c;); alat ini berfokus pada pembuatan satu deklarasi bayangan bersih
sekaligus, yang merupakan apa yang paling dibutuhkan desain dan yang akan Anda
lapis atau perhalus dengan tangan untuk efek bayangan ganda.
Cara menggunakannya
- Seret slider Offset Horizontal dan Offset Vertikal untuk memposisikan bayangan.
- Sesuaikan Radius Blur untuk melunakkan tepi, dan Radius Spread untuk menumbuhkan atau menyusutkan bentuk bayangan.
- Pilih Warna Bayangan dan atur Opacity — alat menggabungkan keduanya menjadi
nilai
rgba()tunggal. - Aktifkan Bayangan inset jika Anda menginginkan bayangan dalam alih-alih bayangan jatuh.
- Salin deklarasi
box-shadowyang dihasilkan dari output kode dan tempel ke dalam stylesheet Anda.
FAQ
Mengapa output menggunakan rgba() alih-alih warna heksadesimal?
Karena warna heksadesimal CSS (#000000) tidak dapat mengekspresikan transparansi parsial sendiri.
Menggabungkan pemilih warna dengan slider opacity menjadi
rgba(r, g, b, a) memungkinkan Anda mengatur dengan tepat seberapa kuat tampilan bayangan
tanpa properti opacity terpisah yang mempengaruhi sisa elemen.
Bisakah spread-radius negatif? Ya — spread negatif menyusutkan bentuk bayangan sebelum blur diterapkan, yang berguna untuk bayangan lembut dan terkandung (seperti efek elevasi halus) daripada yang merembes jauh melampaui tepi elemen.
Apa perbedaan antara bayangan reguler dan bayangan inset?
box-shadow reguler dirender di luar perbatasan elemen, seolah-olah
elemen itu terangkat dari halaman. Bayangan inset dirender di dalam
perbatasan, membuat elemen terlihat ditekan atau diukir.
Apakah alat ini menyimpan atau mengunggah apa pun? Tidak. Semua perhitungan berjalan secara lokal di browser Anda — warna dan nilai slider Anda tidak pernah meninggalkan perangkat Anda.