CSS3 memungkinkan anda menambahkan suatu bayangan untuk setiap teks . Dengan dukungannya secara simultan dapat diterapkan pada teks yang sama, CSS3 Text Shadows dapat menghasilkan beberapa efek tekstual yang menakjubkan tanpa gambar.

Berikut ini adalah sintaks untuk CSS3 Text Shadows:

text-shadow: <offsetx> <offsety> <blur-radius> <color>

• Offsetx: offset bayangan horizontal ( valid CSS dalam unit) relatif terhadap teks. Sebuah nilai negatif tempat bayangan di sebelah kiri teks.

• Offsety: offset  bayangan vertikal (valid CSS dalam satuan panjang) relatif terhadap teks. Sebuah nilai negatif tempat bayangan ke atas teks.

• Blur-radius *: nilai Opsional untuk mengatur kekuatan blur (valid CSS dalam satuan panjang ). Default "0",  jika nilai blur-radius tidak ditentukan.

• Color *: nilai Opsional untuk mengatur warna bayangan. Nilai dapat didefinisikan baik pada awal atau  akhir text-shadow. Standarnya adalah warna UI jika itu tidak ditentukan.

Berikut ini adalah beberapa contoh dasar CSS3 Text Shadows:

Basic Shadow:

Buku Catatan si Ugi

Blurred Shadow:

Buku Catatan si Ugi

Shadow with text color set to match closely the document's background color:
Contoh ini mengatur warna teks agar sesuai dengan warna latar belakang dokumen (seperti halnya warna putih), yang mengharuskan untuk menentukan tepi luar teks.

Buku Catatan si Ugi

Inset (aka Letterpress) Text Shadow:
Contoh ini menetapkan untuk membuat teks inset, atau teks yang muncul ditekan sedikit ke latar belakang. Ada beberapa cara untuk mencapai tampilannya, satu cara untuk mendefinisikannya adalah ay bayangan offset (meninggalkan bayangan x offset 0), untuk menentukan warna bayangan yang lebih terang dari warna font teks.

Buku Catatan si Ugi

Berikut contoh yang diterapkan terhadap latar belakang gelap:

Buku Catatan si Ugi

Multiple, Simultaneous text Shadows
Multiple text shadows dapat diterapkan ke elemen yang sama secara bersamaan, yang dapat menghasikan beberapa efek yang menarik. Untuk menambahkan beberapa bayangan teks ke elemen, setiap definisi bayangan teks dipisahkan dengan tanda koma dalam text-shadow properti:

Buku Catatan si Ugi

3D looking Text Shadow:
Dalam contoh ini, beberapa bayangan warna yang sama ditambahkan ke elemen teks, masing-masing bayangan mengimbangi beberapa piksel yang lebih dibandingkan dengan warna sebelumnya. Hal ini menciptakan ilusi 3D dari teks

Buku Catatan si Ugi

Glowing Text Shadow:
Anda dapat membuat "teks bercahaya" dengan menggunakan bayangan beberapa teks yang tidak sama dengan teks latar depan, pada dasarnya bayangan bersembunyi di balik teks. Kekuatan blur ditampilkan meningkat pada setiap bayangan gelap dengan peracikan warna, hingga tercipta sebuah efek "cahaya":

Buku Catatan si Ugi