Properti untuk membuat bayangan (shadow), mulai dikenalkan pada CSS3. Properti tersebut adalah box-shadow dan text-shadow.
Bayangan untuk elemen dan teks dengan css
Keduanya sama-sama berfungsi untuk membuat bayangan. Properti box-shadow digunakan untuk membuat bayangan untuk kotak atau elemen kontainer. Sementara itu, properti text-shadow digunakan untuk membuat bayangan pada teks.

Membuat Bayangan untuk Teks

Langsung saja ke contoh, silahkan buat style seperti ini.
h2 {
    text-shadow: 3px 2px 1px grey;
    font-size: 40px;
}
kemudian HTML-nya:
<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bayangan</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h2>Bayanganmu!</h2>
</body>
</html>
Hasilnya:

Bayanganmu!

Mantap!
Teksnya memiliki bayangan.

Membuat Bayangan untuk Box

Selanjutnya kita coba membuat bayangan untuk kotak atau kontainer.
style.css
.kotak {
    box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    padding: 10px;
    border: 1px dashed grey;
}
bayangan.html
<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bayangan</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>

    <div class="kotak">Tiap malam, aku selalu melihat bayangan hitam</div>

</body>
</html>
hasilnya:
Tiap malam, aku selalu melihat bayangan hitam

Penjelasan Nilai Bayangan

Bagaimana, mudah bukan membuat bayangan?
Properti bayangan memiliki empat nilai yang harus diberikan:
box-shadow: x y z warna;
  1. nilai x untuk menentukan arah horizontal
  2. nilai y untuk menentukan arah vertikal
  3. nilai z untuk menentukan keburaman (blur) bayangan
  4. nilai warna, bisa menggunakan rgb(), rgba(), kode warna, nama warna, dsb.
(baca juga: 6 nilai warna yang valid dalam css)
Jika nilai x dan y diberikan nilai negatif, maka bayangannya akan mengarah ke atas. Sementara itu, nili z tidak boleh negatif.
Contohnya:
.kotak {
    box-shadow: -3px -3px 2px rgba(0,0,0,0.4);
    padding: 10px;
    border: 1px dashed grey;
}
Maka hasilnya:
Tiap malam, aku selalu melihat bayangan hitam

Bayangan Masuk ke Dalam

Jika ingin membuat bayangan masuk ke dalam kotak, maka kita perlu menambahkan kata kunci inset.
contoh:
.kotak {
    box-shadow: inset 3px 3px 4px rgba(0,0,0,0.4);
    padding: 10px;
    border: 1px solid grey;
}
Hasilnya:
Tiap malam, aku selalu melihat bayangan hitam

Ahir kata…

Nah itulah cara membuat effek bayangan dengan CSS. Selamat mencoba dan selamat berkreasi.