Skip to main content

B.4.1.11. Text Shadow

Temen-temen pasti pernah melihat teks yang terlihat seperti ada bayangannya, kan? Nah, di CSS, kita bisa bikin efek bayangan pada teks menggunakan properti text-shadow. Properti ini digunakan untuk menambahkan bayangan pada teks, yang bisa bikin teks jadi lebih menarik dan menonjol.

Sintaks untuk menggunakan properti ini cukup sederhana, coba temen-temen perhatikan kode di bawah

selector {
  text-shadow: horizontal-shadow vertical-shadow blur-radius color;
}
  • horizontal-shadow: Menentukan jarak bayangan secara horizontal dari teks. Nilai positif akan menggeser bayangan ke kanan, sementara nilai negatif akan menggeser ke kiri.
  • vertical-shadow: Menentukan jarak bayangan secara vertikal dari teks. Nilai positif akan menggeser bayangan ke bawah, sementara nilai negatif akan menggeser ke atas.
  • blur-radius (opsional): Menentukan seberapa blur (kabur) bayangan tersebut. Semakin besar nilainya, semakin blur bayangannya. Kalau nggak mau blur, cukup diisi dengan nilai 0.
  • color (opsional): Menentukan warna dari bayangan. Bisa menggunakan nama warna, kode warna hex, RGB, atau HSL.

Sekarang kita lihat contoh penerapannya:

<h1>Muhamad Firly Ramadan</h1>

Dengan contoh di atas, kita menambahkan bayangan pada teks <h1> dengan penerapan style sexerti:

  • Bayangan bergeser 2px ke kanan (horizontal shadow).
  • Bayangan bergeser 2px ke bawah (vertical shadow).
  • Bayangan memiliki tingkat blur sebesar 5px.
  • Warna bayangan adalah hitam dengan transparansi 50% (rgba(0, 0, 0, 0.5)).

Maka hasilnya akan terlihat seperti:

Output

Text-shadow juga mendukung multiple shadow. Kita bisa menambahkan lebih dari satu bayangan pada teks dengan memisahkan setiap bayangan menggunakan koma.

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

Di sini, kita memberikan dua bayangan berbeda pada teks <h1> sebelumnya:

  • Bayangan pertama berwarna hitam dengan geseran ke kanan dan bawah.
  • Bayangan kedua berwarna biru dengan geseran ke kiri dan atas.

Maka hasilnya akan terlihat seperti:

Output

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.1-text-styling/B.4.1.11-text-shadow