Cara Membuat Efek TEXT SHADOW Neon Glow

Efek Neon Glow ini menggunakan banyak blur radius layer untuk membuat efek cahaya yang keluar dari teks. Efek ini juga banyak dipakai oleh para ahli web design. Karena duplikasi blur radius dengan nilai dan opsi warna yang berbeda-beda, maka hasilnya pun akan menghasilkan efek ‘Light-Glow.”

Kali ini warna dasar font diubah menjadi merah dengan banyak duplikasi perubahan pada blur radius hingga mencapai hasil ‘glow’ yang diinginkan.

Buat dulu efek glownya menggunakan blur radius. Disini, kelipatan 5 digunakan untuk menghasilkan efek glownya dengan kode CSS:

h1 {

font-family:courier new;

color: red;

font-size: 100px;

text-align: center;

text-shadow:

0 0 5px white,

0 0 10px white,

0 0 15px white,

0 0 20px white,

0 0 25px white,

0 0 30px white,

0 0 35px white,

0 0 40px white;

}

Here’s the final image we have so far:

Sekarang, mari buat efek neonnya lebih nyata. Tambahkan beberapa efek blur radius lagi tepat dibawah blur radius sebelumnya dengan warna merah. Duplikat nilai radius warna merah tersebut hingga mencapai efek yang nyata. Saya menggunakan kelipatan 25 sebagai warna blur eksternalnya. Ini kodenya:

h1 {

font-family:courier new;

color: red;

font-size: 100px;

text-align: center;

text-shadow:

0 0 5px white,

0 0 10px white,

0 0 15px white,

0 0 20px white,

0 0 25px white,

0 0 30px white,

0 0 35px white,

0 0 40px white,

0 0 50px #ff0000,

0 0 75px #ff0000,

0 0 100px #ff0000,

0 0 125px #ff0000,

0 0 150px #ff0000;

}

Dan hasilnya seperti berikut:

Seperti terlihat pada gambar, fontnya masih terlalu kaku sehingga kurang sedikit efek glownya. Untuk menjadikannya lebih nyata, rubah warnanya menjadi transparent.

Color:transparent;

Agar lebih nyata lagi, tambahkan efek blur radius berwarna merah dengan nilai 2px diatas kode 0 0 5px white. Maka kodenya menjadi:

Text-shadow:

0 0 2px #ff0000,

0 0 5px white,

.....................

Dan inilah hasil paling akhir yang didapat.