Membuat Bayangan Pada Tulisan Dengan CSS

Text Shadow

Properti text-shadow dapat menambahkan bayangan pada tulisan.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Efek bayangan teks!</h1>

</body></html>

Jalankan Contoh

Selanjutnya, tambahkan warna (merah) ke bayangan:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Efek bayangan teks!</h1>

</body></html>

Jalankan Contoh

Kemudian, tambahkan efek blur (5px) ke bayangan:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Efek bayangan teks!</h1>

</body></html>

Jalankan Contoh

Lebih Banyak Contoh

Contoh 1

text-shadow pada tulisan putih:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Efek bayangan teks!</h1>

</body></html>

Jalankan Contoh

Contoh 2

Bayangan tulisan dengan cahaya merah:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>

<h1>Bayangan dengan cahaya neon merah!</h1>

</body></html>

Jalankan Contoh

Contoh 3

text-shadow dengan cahaya merah dan biru:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Bayangan dengan cahaya neon merah dan biru!</h1>

</body></html>

Jalankan Contoh

Contoh 4

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1>Efek bayangan teks!</h1>

</body></html>

Jalankan Contoh

Contoh 5

text-shadow dasar:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px #FF0000;
}
</style>
</head>
<body>

<h1>Properti text-shadow</h1>

</body></html>

Jalankan Contoh

Contoh 6

text-shadow dengan efek buram:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 8px #FF0000;
}
</style>
</head>
<body>

<h1>Bayangan dengan efek buram</h1>

</body></html>

Jalankan Contoh

Contoh 7

text-shadow pada tulisan putih:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Bayangan pada teks putih</h1>

</body></html>

Jalankan Contoh

Contoh 8

text-shadow dengan cahaya merah:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>

<h1>Bayangan dengan cahaya neon merah</h1>

</body></html>

Jalankan Contoh

Contoh 9

text-shadow dengan cahaya merah dan biru:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Bayangan dengan cahaya neon merah dan biru</h1>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Mengatur Spasi Tulisan Dengan CSS
Tutorial setelahnya : Mengatur Font Dengan CSS
Semua Tutorial CSS : Tutorial CSS