Home » How To » Cara Membuat Glowing Text Pada Website

Cara Membuat Glowing Text Pada Website

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat teks yang bersinar(glowing text) dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  background-color: black;
  font-family: cursive;
}

.glow {
  font-size: 80px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #6495ED	, 0 0 40px #6495ED	, 0 0 50px #6495ED	, 0 0 60px #6495ED	, 0 0 70px #6495ED	;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #008B8B, 0 0 40px #008B8B, 0 0 50px #008B8B, 0 0 60px #008B8B, 0 0 70px #008B8B, 0 0 80px #008B8B;
  }
}
</style>
</head>
<body>

<h1 class="glow">Contoh Glowing Text</h1>
     
</body>
</html> 

Cara Membuat Glowing Text

Gunakan properti text-shadow untuk membuat efek lampu neon, lalu gunakan animation bersama dengan keyframes untuk menambahkan efek bercahaya berulang kali:

Contoh

.glow {
  font-size: 80px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #6495ED	, 0 0 40px #6495ED	, 0 0 50px #6495ED	, 0 0 60px #6495ED	, 0 0 70px #6495ED	;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #008B8B, 0 0 40px #008B8B, 0 0 50px #008B8B, 0 0 60px #008B8B, 0 0 70px #008B8B, 0 0 80px #008B8B;
  }
}

You may also like