Judul yang tampil di atas foto latar sering sulit dibaca karena warnanya bertabrakan dengan gambar di belakangnya. Properti text-shadow menambahkan bayangan pada setiap huruf, sehingga teks tetap terpisah dari latarnya. Selain untuk keterbacaan, properti ini dipakai untuk efek gaya: tepi tegas khas poster retro, pendaran lembut, hingga lapisan ganda. Sintaksnya mirip box-shadow, tetapi ada beberapa perbedaan penting yang perlu kita pahami sebelum menerapkannya.

Sintaks Text Shadow #

Bentuk penulisan yang paling umum memuat empat nilai:

css 
.judul {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Mari kita telaah keempat nilai tersebut:

  1. Nilai pertama (2px): offset-x — menggeser bayangan teks 2 piksel ke kanan.
  2. Nilai kedua (2px): offset-y — menggeser bayangan teks 2 piksel ke bawah.
  3. Nilai ketiga (4px): blur radius — melembutkan tepi bayangan; bila nilai ini dihilangkan, tepi bayangan tegas karena blur bawaannya 0.
  4. Nilai keempat (rgba(0, 0, 0, 0.5)): warna bayangan; bila dihilangkan, warnanya mengikuti currentColor — warna teks elemen.

Dua perbedaan dengan box-shadow: bayangan teks tidak memiliki komponen spread, dan bayangan digambar per huruf mengikuti bentuk glyph — bukan persegi di belakang kotak. Properti ini juga diwariskan, sehingga nilai yang ditulis pada body merambat ke seluruh teks di dalamnya; letakkan deklarasi pada elemen yang benar-benar membutuhkannya.

Perhatikan pula bentuk serialisasi computed di DevTools: warna ditulis di posisi terdepan dan blur selalu tampil — termasuk bila kita menulis 0, tercatat sebagai 0px.

Efek Populer: Tegas, Bercahaya, dan Bertingkat #

Efek pertama adalah hard shadow: blur ditetapkan 0 sehingga bayangan menjadi salinan tegas di belakang huruf — gaya yang akrab pada poster dan judul game:

css 
.judul-retro {
  text-shadow: 3px 3px 0px rgb(30, 58, 138);
}

Efek kedua adalah pendaran (glow): kedua offset ditetapkan 0 sehingga blur menyebar simetris ke segala arah di sekeliling huruf:

css 
.judul-bercahaya {
  text-shadow: 0px 0px 6px rgba(37, 99, 235, 0.8);
}

Efek ketiga menumpuk dua bayangan yang dipisahkan koma. Bayangan pertama digambar paling atas, lapisan kedua sedikit lebih jauh dan lebih gelap, sehingga terbentuk ilusi kedalaman ala cetakan:

css 
.judul-poster {
  text-shadow: 2px 2px 0px rgb(240, 171, 252), 4px 4px 0px rgb(88, 28, 135);
}

Bayangan tanpa blur juga dapat meniru garis tepi pada huruf. Empat bayangan yang digeser ke empat arah dengan jarak satu piksel membentuk outline tiruan di sekeliling teks:

css 
.teks-bergaris {
  text-shadow: 1px 0px 0px rgb(15, 23, 42), -1px 0px 0px rgb(15, 23, 42),
               0px 1px 0px rgb(15, 23, 42), 0px -1px 0px rgb(15, 23, 42);
}

Pendekatan ini menjadi alternatif ringan untuk properti -webkit-text-stroke pada kebutuhan garis tipis, dan berjalan di semua browser karena murni memakai text-shadow.

Keterbacaan Tetap Utama #

Bayangan teks paling bermanfaat ketika teks berada di atas latar yang tidak terprediksi: foto, ilustrasi, atau gradasi warna. Bayangan gelap tipis dengan alpha rendah — misalnya 0px 1px 2px rgba(0, 0, 0, 0.4) — memberikan pemisahan cukup tanpa mengubah karakter desain. Kontras warna teks terhadap latar tetap menjadi ukuran utama keterbacaan; bayangan hanya penolong, bukan pengganti.

Perhatikan pula biaya rendering: blur besar pada teks yang sangat banyak merupakan pekerjaan melukis yang nyata bagi browser, karena setiap huruf digambar ulang beserta bayangannya. Gunakan blur moderat untuk isi halaman dan simpan efek bertumpuk untuk judul tunggal yang memang menjadi titik fokus.

Hasil di Browser:

text 
Judul pertama tercatat "rgba(0, 0, 0, 0.5) 2px 2px 4px".
Judul kedua memakai blur nol sehingga computed menampilkan "0px":
"rgb(30, 58, 138) 3px 3px 0px". Judul ketiga berpendar dengan
"rgba(37, 99, 235, 0.8) 0px 0px 6px". Judul keempat bertingkat:
"rgb(240, 171, 252) 2px 2px 0px, rgb(88, 28, 135) 4px 4px 0px".

Demo lengkap chapter ini menampilkan keempat judul di atas plus satu panel judul di atas latar gradasi yang meniru foto. Setiap judul membawa atribut data-expected yang membandingkan nilai computed text-shadow secara utuh, sehingga pembahasan di atas dapat diverifikasi otomatis oleh harness uji Course ini.