How to Add a Neon Glow Text Effect in Hostinger Website Builder
If you’re using Hostinger Website Builder and want to add a stylish glowing effect to your text, you’re in the right place. In this post, I’ll walk you through exactly how to add a neon glow text effect using a simple HTML snippet.
Step 1: Access Your Website in Hostinger Builder
Log in to your Hostinger account, go to “Websites,” and then click on “Edit Website” next to the site you want to customize. If you’re managing multiple sites, look for the small icon that shows whether your site is built using Hostinger Builder or WordPress.
Step 2: Add an Embed Code Element
Inside the builder, add a blank section where you want the glowing text to appear. Click “Add Element” from the sidebar, scroll down, and drag the Embed Code element into the section.
Click on “Enter Code,” delete the default content, and paste in the HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Glow Text Effect</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #111;
margin: 0;
}
.neon-text {
font-size: 60px;
font-weight: bold;
color: #fff;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
display: inline-block;
}
.neon-text::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
background: linear-gradient(45deg, #00ff99, #ff0099, #00ccff);
-webkit-background-clip: text;
color: transparent;
animation: neon-glow 1.5s ease-in-out infinite;
z-index: -1;
filter: blur(8px);
}
@keyframes neon-glow {
0% {
text-shadow: 0 0 5px #00ff99, 0 0 10px #ff0099, 0 0 15px #00ccff;
}
50% {
text-shadow: 0 0 20px #00ff99, 0 0 30px #ff0099, 0 0 40px #00ccff;
}
100% {
text-shadow: 0 0 5px #00ff99, 0 0 10px #ff0099, 0 0 15px #00ccff;
}
}
</style>
</head>
<body>
<div class="neon-text" data-text="Neon Glow Effect">Neon Glow Effect</div>
</body>
</html>
Step 3: Troubleshoot Display Issues
Sometimes Hostinger may not display the full preview of your code. If that happens:
- Click “Update Code” and preview your site live.
- If needed, undo the action (Command + Z on Mac or Ctrl + Z on PC) to refresh the view.
Step 4: Customize the Text
Want to edit the text with glow? Here’s a smart trick:
- Copy your current text.
- Click into the embed code again.
- Use Command + F (Mac) or Ctrl + F (PC) to find the text portion in the code.
- Replace it with your new message.
Make sure the text is also updated in the data-text attribute if needed—that’s what ensures the glow effect applies to the entire sentence.
Step 5: Save and Preview
Once you’ve edited your text, adjust the section height, save the changes, and click “View Site Live” to see your glowing text in action.
Get More Hostinger Website Builder Tips
Want to learn more tricks like this? Join my free Hostinger Website Builder course where I show you how to:
- Build different types of websites
- Use SEO and eCommerce features
- Add advanced customizations with HTML
🎓 Join for free at university.bensexperience.com
If you have any questions, leave a comment on the video or reach out directly. And don’t forget to give the video a thumbs up if this helped you!
Happy building!
4o
