CSS Text Shadow

Dengan CSS, Anda dapat menambahkan bayangan pada teks menggunakan properti text-shadow. Ini berguna untuk menciptakan efek visual menarik pada teks di halaman web.

1. Dasar Penggunaan text-shadow

Properti text-shadow memiliki beberapa nilai yang dapat Anda tentukan:

• horizontal shadow: Jarak bayangan secara horizontal.
• vertical shadow: Jarak bayangan secara vertikal.
• blur radius: Seberapa blur bayangan tersebut.
• color: Warna bayangan.

h1 {
  text-shadow: 2px 2px 4px #000000;
}

2. Menggunakan Beberapa Bayangan

Anda juga dapat menambahkan lebih dari satu bayangan pada teks dengan memisahkan nilai bayangan menggunakan koma.

h1 {
  text-shadow: 1px 1px 2px red, -1px -1px 2px blue;
}

3. Menggunakan Warna Transparan

Bayangan teks juga bisa menggunakan warna transparan untuk menciptakan efek yang lebih halus. Anda bisa menggunakan nilai rgba untuk transparansi.

h1 {
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

4. Membuat Efek Teks Menonjol

Dengan mengatur bayangan yang lebih besar dan warna terang, Anda bisa membuat teks terlihat lebih menonjol di halaman.

h1 {
  text-shadow: 5px 5px 10px rgba(255, 0, 0, 0.7);
}

5. Membuat Efek Bayangan Halus

Jika Anda ingin teks tampak lebih halus dengan bayangan lembut, Anda bisa menggunakan radius blur yang besar.

h1 {
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}