Cara Membuat Glowing Text Pada Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 17, 2021

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;
  }
}