Pembuat Bayangan Gradien CSS — Cahaya Gradien yang Buram di Belakang Elemen
Buat cahaya gradien yang buram dan penuh warna yang berada di belakang elemen menggunakan pseudo-elemen ::before dan filter: blur() — plain box-shadow tidak dapat merender gradien. Salin CSS yang siap pakai.
Input
Arah untuk gradien linear, sudut awal untuk gradien conic.
Cahaya
Seberapa halus tepi cahaya terlihat — ini adalah radius filter: blur().
Seberapa jauh cahaya meluas melampaui tepi elemen di setiap sisi.
Cocokkan dengan border-radius elemen itu sendiri agar cahaya mengikuti bentuknya.
Output
Cahaya gradien Anda akan muncul di sini.
Tambahkan ini ke stylesheet Anda, lalu terapkan class="glow" ke elemen (memerlukan position: relative).
Markup dengan gaya inline yang cocok dengan pratinjau di atas — tempel di mana saja.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"gradientType": "linear",
"angle": "135",
"color1": "#ff5f6d",
"position1": "0",
"color2": "#a855f7",
"position2": "50",
"useColor3": "",
"color3": "#00d4ff",
"position3": "100",
"useColor4": "",
"color4": "#facc15",
"position4": "100",
"blur": "40",
"spread": "20",
"opacity": "80",
"borderRadius": "16"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-gradient-shadow-generator` tool (CSS Gradient 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-gradient-shadow-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Bayangan Gradien CSS — Cahaya Gradien yang Buram di Belakang Elemen — 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
Mengapa box-shadow tidak bisa melakukan ini?
box-shadow hanya mengambil satu warna solid — tidak ada cara untuk memberikannya linear-gradient(), radial-gradient() atau conic-gradient(), tidak peduli berapa banyak pemberhentian yang Anda lemparkan padanya. Untuk mendapatkan "cahaya" atau "aura" yang berwarna-warni dan buram di belakang kartu, tombol atau gambar, Anda memerlukan trik berbeda: pseudo-elemen ::before yang diposisikan di belakang elemen (z-index: -1), berukuran sedikit lebih besar melalui inset negatif, diisi dengan latar belakang gradien, dan dilunakkan dengan filter: blur(). Itulah persis apa yang dihasilkan alat ini.
Cara menggunakan alat ini
- Pilih Jenis Gradien — Linear (sapuan lurus melintasi Sudut), Radial (memudar keluar dari pusat), atau Conic (tersapu di sekitar titik pusat dimulai dari Sudut).
- Atur 2 hingga 4 pemberhentian warna, masing-masing dengan warna dan persentase posisi sendiri. Centang Tambahkan pemberhentian warna ketiga dan Tambahkan pemberhentian warna keempat untuk membawa lebih banyak.
- Sesuaikan Blur (seberapa halus tepi cahaya terlihat), Spread (seberapa jauh cahaya meluas melampaui tepi elemen), Opasitas, dan Border Radius (cocokkan ini dengan
border-radiuselemen itu sendiri agar cahaya mengikuti bentuknya). - Salin CSS yang dihasilkan ke stylesheet Anda, lalu tambahkan
class="glow"ke elemen yang Anda inginkan cahayanya di belakang (atau ubah nama kelas agar sesuai dengan penamaan Anda sendiri) — elemen itu sendiri hanya memerlukanposition: relative, yang sudah diatur oleh aturan.glowyang dihasilkan. - Pratinjau menunjukkan efeknya secara langsung; Cuplikan HTML di bawahnya adalah hasil yang sama dengan markup yang diberi gaya inline dan dapat Anda tempel di mana saja stylesheet tidak nyaman.
Mengapa induk memerlukan position: relative?
Cahaya hidup pada pseudo-elemen ::before yang diatur ke position: absolute, yang memposisikan dirinya relatif terhadap positioned nenek moyang terdekat. Tanpa position: relative pada induk, cahaya akan menampar ke halaman (atau nenek moyang positioned berikutnya naik pohon) dan mendarat di tempat yang salah sepenuhnya. CSS yang dihasilkan mengatur ini untuk Anda sebagai bagian dari aturan .glow.
Aturan .glow juga menetapkan isolation: isolate; bersama dengan position: relative;. Dengan sendirinya, position: relative tidak membuat konteks stacking baru — jadi pseudo-elemen z-index: -1 akan melarikan diri melampaui sibling-nya dan stack terhadap nenek moyang does memiliki urutan stacking halaman, yang dapat menyembunyikan cahaya sepenuhnya di belakang latar belakang buram lebih jauh ke atas pohon. isolation: isolate mengaitkan konteks stacking ke .glow itu sendiri, jadi z-index: -1 hanya berarti "di belakang konten saya sendiri," yang membuat cahaya terlihat di sekitar tepi elemen.
FAQ
Apakah ini akan bekerja di setiap browser?
Ya — ::before, filter: blur() dan ketiga fungsi gradien semuanya didukung di setiap browser utama selama bertahun-tahun, tidak ada vendor prefixes yang diperlukan.
Bisakah saya meletakkan konten nyata di depan cahaya?
Ya, itulah intinya — z-index: -1 menjaga gradien sepenuhnya di belakang latar belakang elemen dan konten, jadi teks dan gambar di depan tetap sangat tajam bahkan saat blur berat.
Saya hanya perlu bayangan buram warna solid, bukan gradien — apakah ada alat yang lebih sederhana?
Ya, gunakan CSS Box Shadow Generator — box-shadow sederhana lebih ringan dan tidak memerlukan pseudo-elemen ketika hanya warna solid yang Anda inginkan.
Saya menginginkan gradien itu sendiri, bukan cahaya di belakang sesuatu — di mana itu?
CSS Gradient Generator membangun deklarasi background: linear/radial/conic-gradient(...) sederhana untuk mengisi elemen secara langsung, yang juga merupakan tempat kontrol pemberhentian warna alat ini berasal.
Bagaimana dengan tampilan kaca buram alih-alih cahaya? Itu efek yang berbeda (latar belakang yang transparan dan buram, bukan cahaya di belakang elemen) — lihat CSS Glassmorphism Generator.
Privasi
Semuanya terjadi di browser Anda. Warna yang dipilih, sudut dan pengaturan Anda tidak pernah dikirim ke server — CSS, HTML dan pratinjau dihasilkan dan diperbarui secara lokal saat Anda menyesuaikan kontrol.