Pembuat Drop Shadow CSS
Hasilkan deklarasi filter: drop-shadow() CSS dari offset, blur, warna, dan opacity — bayangan yang mengikuti bentuk PNG transparan, SVG, dan bentuk tidak beraturan, tidak seperti box-shadow.
Input
Digabungkan dengan warna menjadi nilai rgba().
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-drop-shadow-filter-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"offsetX": "4",
"offsetY": "4",
"blurRadius": "6",
"color": "#000000",
"opacity": "40"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-drop-shadow-filter-generator` tool (CSS Drop 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-drop-shadow-filter-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Drop Shadow 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
Fungsinya
Membuat deklarasi filter: drop-shadow() dari slider untuk offset, blur, warna, dan opacity. Salin hasilnya langsung ke stylesheet Anda.
drop-shadow vs box-shadow
box-shadow selalu memberi bayangan pada kotak persegi elemen. filter: drop-shadow() memberi bayangan pada bentuk yang dirender — ia mengikuti kanal alfa, sehingga PNG transparan, ikon SVG, elemen yang dipotong, dan teks mendapatkan bayangan yang mengikuti garis tepi aslinya.
filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>);Catatan
drop-shadow()tidak memiliki spread dan tidak memiliki inset — gunakanbox-shadowjika Anda membutuhkan salah satunya.- Gabungkan beberapa filter dengan mendaftarkannya:
filter: drop-shadow(...) brightness(1.1);. Lihat generator filter CSS. - Blur adalah radius, bukan diameter, dan nilai yang lebih besar lebih berat untuk dirender pada elemen besar.