Generator CSS Text Shadow
Buat efek CSS text-shadow dengan beberapa lapisan: glow, outline, 3D retro, dan teks timbul. Pratinjau langsung dengan teks Anda sendiri dan kode siap salin.
Preset
Lapisan
Pengaturan pratinjau
Pratinjau
Bayangan
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
Alat Terkait
Lihat SemuaApa itu Generator Text Shadow?
Alat ini membuat properti CSS text-shadow dari satu lapisan atau lebih. Setiap lapisan memiliki offset horizontal dan vertikal, blur, warna, dan opasitas, dan pratinjaunya menampilkan teks contoh Anda sendiri dengan hasil tersebut.
Cara menggunakan Generator Text Shadow
- Mulai dari preset seperti Berpendar, Retro, Garis tepi, atau Timbul, atau pertahankan bayangan default.
- Pilih sebuah lapisan lalu atur Geser horizontal, Geser vertikal, Blur, Warna bayangan, dan Opasitas.
- Tambahkan lapisan lain untuk outline atau efek 3D bertumpuk; hapus lapisan yang tidak diperlukan.
- Ketik Teks contoh Anda sendiri dan pilih warna teks serta latar untuk memeriksa keterbacaan.
- Salin kode CSS-nya.
Contoh
x 3px, y 3px, blur 0, color #ff0000, opacity 1
text-shadow: 3px 3px 0 #ff0000;
Kapan menggunakan Generator Text Shadow
Gunakan untuk judul, teks hero, efek neon atau retro, dan bayangan halus yang meningkatkan kontras di atas gambar. Untuk outline sungguhan pada teks besar, -webkit-text-stroke memberi hasil lebih tajam daripada bayangan bertumpuk; hindari bayangan tebal pada teks isi karena mengurangi keterbacaan.
Cara kerja Generator Text Shadow
Setiap lapisan ditulis sebagai x y blur color (text-shadow tidak punya spread atau inset). Offset dan blur bernilai px, opasitas diterapkan ke alpha warna, menghasilkan hex untuk warna buram dan rgba() untuk lainnya. Lapisan dipisahkan dengan koma; yang pertama digambar paling atas. Preset outline memakai empat offset 1px ke setiap arah diagonal, cara CSS murni yang umum untuk meniru goresan teks.
Kasus Penggunaan Umum
- Judul dengan efek pendar neon
- Teks putih yang tetap terbaca di atas foto
- Judul 3D retro bertumpuk
- Outline teks tiruan tanpa SVG
- Label timbul atau bergaya letterpress
Pertanyaan Umum
Mengapa tidak ada opsi spread?
Properti CSS text-shadow hanya menerima offset, blur, dan warna. Agar bayangan terlihat lebih tebal, tumpuk beberapa lapisan dengan offset kecil.
Bisakah saya membuat efek pendar neon?
Bisa: gunakan offset nol dan dua atau tiga lapisan dengan blur yang makin besar dalam warna terang yang sama, seperti pada preset Berpendar.
Apakah text-shadow memengaruhi tata letak?
Tidak. Bayangan digambar di luar teks tanpa memakan ruang, sehingga tidak pernah menggeser elemen di sekitarnya.