Cara memakai
- Ketik teks Anda di Teks contoh. Pratinjau menampilkannya dengan bayangan, sehingga Anda bisa menilai hasilnya dengan kata-kata Anda sendiri.
- Atur Pergeseran horizontal (px), Pergeseran vertikal (px), dan Blur (px) dari lapisan pertama. Pergeseran vertikal yang positif memindahkan bayangan ke bawah.
- Pilih Warna bayangan dan Opasitas tiap lapisan, dan tambahkan lapisan dengan Tambah lapisan untuk pendar yang lebih lembut.
- Salin deklarasi CSS dan tempelkan ke aturan teks Anda.
Cara nilai dibuat
Properti text-shadow menerima satu bayangan atau daftar bayangan yang dipisahkan koma. Setiap bayangan punya pergeseran horizontal dan vertikal serta radius blur, yang boleh dihilangkan, dan warna, yang boleh ditulis sebelum atau sesudah panjangnya. Spesifikasi CSS Text Decoration memuat tata bahasanya. Bayangan pertama digambar di atas yang lain, dan tanpa bayangan nilainya none.
Bayangan teks tidak punya sebaran, berbeda dengan bayangan kotak. Radius blur tidak pernah negatif, dan blur yang lebih besar menyebarkan bayangan di area yang lebih luas. Opasitas ditulis sebagai nilai alpha dari warna rgba, dengan paling banyak dua desimal. Panjang nol tidak butuh satuan, sehingga alat ini menulis 0.
text-shadow: offset-x offset-y blur colour, offset-x offset-y blur colour, ...Lapisan dan yang diperiksa penyunting
Pendar yang lembut sering memakai dua atau tiga lapisan: bayangan kecil dan gelap dekat huruf, serta bayangan yang lebih besar dan lebih terang di luarnya. Penyunting membolehkan hingga 8 lapisan, pergeseran dari -200 sampai 200 piksel, blur dari 0 sampai 100 piksel, dan opasitas dari 0 sampai 100 persen.
Warna pratinjau, yaitu warna teks dan latar, hanya untuk pratinjau. Keduanya bukan bagian dari CSS, sehingga deklarasinya hanya memuat bayangan dan tidak ada yang lain.
Contoh: bayangan hitam di bawah pendar biru
Lapisan pertama punya pergeseran 0 dan 2 piksel, blur 4 piksel, dan hitam dengan opasitas 30 persen. Lapisan kedua tanpa pergeseran, blur 12 piksel, dan biru #3b82f6 dengan opasitas 50 persen.
Nilainya adalah 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5), dan deklarasinya adalah text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5);
Pertanyaan yang sering diajukan
Apa perbedaan blur dan lapisan kedua?
Blur melembutkan tepi satu bayangan, sehingga memudar di area yang lebih luas. Lapisan kedua menambah bayangan lain dengan pergeseran, warna, dan opasitasnya sendiri, yang bisa digambar di tempat berbeda dari yang pertama.
Mengapa pergeseran punya tanda?
Pergeseran horizontal yang positif memindahkan bayangan ke kanan dan yang negatif ke kiri. Pergeseran vertikal yang positif memindahkannya ke bawah, sehingga bayangan yang jatuh di bawah teks punya nilai positif.
Bisakah bayangan teks punya sebaran?
Tidak. Properti text-shadow hanya menerima pergeseran, blur, dan warna. Bayangan kotak punya sebaran, tetapi teks tidak, sehingga penyunting tidak menawarkannya.
Mengapa pratinjau terlihat berbeda dari halaman saya?
Pratinjau memakai teks contoh, ukuran, dan warna yang Anda atur di sini. Di halaman Anda bayangan jatuh pada font, ukuran, dan latar Anda sendiri, jadi periksa hasilnya di tempatnya sebelum Anda selesai.
Apakah ada yang saya ketik disimpan atau dikirim ke server?
Tidak. Teks contoh, pratinjau, dan CSS dibuat di peramban Anda. Tidak ada yang disimpan atau dikirim ke server kami, jadi salin deklarasinya sebelum Anda meninggalkan halaman.
Sumber
- W3C (dalam bahasa Inggris): CSS Text Decoration Module Level 3, text-shadow
- MDN (dalam bahasa Inggris): text-shadow
Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.