Generator Text Shadow CSS
Buat text-shadow CSS dengan hingga empat lapisan offset, blur, warna dan opasitas — dengan pratinjau langsung pada teks Anda sendiri, lalu salin deklarasi, aturan CSS lengkap dan HTML.
Input
Hanya digunakan untuk pratinjau dan snippet HTML — bayangan bekerja pada teks apa pun.
Lapisan dipisahkan koma; lapisan pertama yang terdaftar dicat di atas.
Bayangan terlihat sangat berbeda pada latar belakang gelap dan terang — cocokkan dengan halaman Anda.
Di bawah 100% opasitas warna ditulis sebagai rgba().
Output
Teks bayangan Anda akan muncul di sini.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-text-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "NEON",
"fontSize": "96",
"fontFamily": "sans",
"fontWeight": "400",
"textColor": "#ffffff",
"bgColor": "#0b0b1a",
"layers": "4",
"offsetX1": "0",
"offsetY1": "0",
"blur1": "4",
"color1": "#ffffff",
"opacity1": "100",
"offsetX2": "0",
"offsetY2": "0",
"blur2": "10",
"color2": "#ff00de",
"opacity2": "100",
"offsetX3": "0",
"offsetY3": "0",
"blur3": "20",
"color3": "#ff00de",
"opacity3": "100",
"offsetX4": "0",
"offsetY4": "0",
"blur4": "40",
"color4": "#ff00de",
"opacity4": "100"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-text-shadow-generator` tool (CSS Text 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-text-shadow-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator Text 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
Properti CSS text-shadow kecil namun serbaguna. Satu lapisan memberi Anda bayangan drop yang lembut. Tumpuk beberapa lapisan dan Anda mendapatkan cahaya neon, huruf 3D retro yang berat, garis tepi yang rapi atau tampilan letterpress yang tertekan. Bagian yang sulit adalah angkanya: setiap lapisan memiliki dua offset, radius blur dan warna, dan efeknya hanya terwujud ketika Anda dapat melihat lapisan berinteraksi. Generator ini memungkinkan Anda menyesuaikan setiap lapisan dengan slider, melihat hasilnya pada teks Anda sendiri, dan menyalin CSS yang dapat Anda gunakan segera.
Cara menggunakannya
- Ketikkan teks contoh Anda dan pilih font, bobot dan ukuran. Mereka hanya mendorong pratinjau dan snippet HTML, karena bayangan bekerja pada teks apa pun.
- Atur warna teks dan latar belakang agar sesuai dengan halaman Anda. Cahaya yang terlihat bagus pada biru laut dapat menghilang di atas putih.
- Pilih berapa banyak lapisan bayangan yang Anda inginkan (1–4). Setiap lapisan mendapat kontrol sendiri:
- Offset horizontal / vertikal: sejauh mana bayangan bergerak ke kanan/bawah (nilai negatif memindahkannya ke kiri/atas).
- Radius blur: 0 memberikan salinan dengan tepi keras, dan nilai yang lebih tinggi melunakkannya menjadi cahaya.
- Warna bayangan + opasitas: di bawah opasitas 100% warna ditulis sebagai
rgba().
- Salin output. Anda mendapatkan deklarasi
text-shadowsatu baris, aturan CSS lengkap (font, warna dan bayangan), dan snippet HTML yang cocok.
Klik Coba contoh untuk memuat cahaya neon empat lapisan, yang merupakan cara cepat untuk melihat bagaimana lapisan bertumpuk menggabungkan. Resep di bawah memberikan nilai yang tepat untuk tampilan klasik lainnya.
Cara bayangan teks berlapis bekerja
text-shadow mengambil daftar bayangan yang dipisahkan koma, masing-masing ditulis sebagai offset-x offset-y blur-radius color. Bayangan pertama dalam daftar dicat di atas, dan setiap bayangan kemudian duduk di belakang yang sebelumnya. Pengurutan itulah yang membuat efek klasik bekerja:
- Cahaya neon: offset nol dengan blur yang meningkat:
0 0 4px #fff, kemudian0 0 10px,0 0 20pxdan0 0 40pxdalam warna cerah seperti#ff00de. Ini membangun halo yang cerah di dekat huruf dan memudar ke luar. Gunakan di latar belakang gelap. - 3D retro: bayangan keras (blur 0) melangkah diagonal dalam nuansa yang menghitam (
2px 2px 0,4px 4px 0,6px 6px 0) memanjangkan huruf. Lapisan akhir yang blur dan semi-transparan (10px 10px 8px, 30% hitam) mendasarkan mereka. - Garis tepi: empat bayangan keras (
-2px -2px 0,2px -2px 0,-2px 2px 0,2px 2px 0) melacak goresan di sekitar glyph. Tidak seperti-webkit-text-stroke, ini bekerja di mana-mana. - Letterpress: bayangan
0 1px 0ringan (80% putih) dengan bayangan gelap0 -1px 0di atasnya (20% hitam) membuat teks terlihat ditekan ke halaman. Ini bekerja paling baik di latar belakang abu-abu tengah.
Tidak seperti box-shadow, text-shadow tidak memiliki nilai spread dan tidak ada kata kunci inset. Jika Anda membutuhkannya untuk kartu atau tombol, gunakan Generator Box Shadow CSS sebagai gantinya.
Tips kinerja dan aksesibilitas
- Radius blur besar pada blok teks besar memerlukan waktu cat. Jaga cahaya multi-lapisan berat untuk judul daripada salinan isi.
- Bayangan tidak diperhitungkan untuk kontras teks. Pastikan warna teks saja kontras cukup baik dengan latar belakang, karena bayangan dapat mengurangi keterbacaan pada ukuran kecil.
- Untuk efek animasi, lihat Generator CSS Glitch Text, dan untuk warna di dalam huruf daripada di sekitarnya, coba Generator CSS Gradient Text.
Privasi
Semuanya berjalan di browser Anda. Teks dan pengaturan Anda tidak pernah diunggah.