CSS Snippet:
Glow Text
This CSS snippet creates a glowing text effect using layered shadows to add light, colour, and depth.
It gives headings a luminous, high-impact look that works especially well on darker backgrounds.
Difficulty:
Easy
Live preview
Glow Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this text style when you want a heading to feel bright, energetic, and visually prominent.
It works particularly well for modern hero sections, dark UI layouts, or designs with a more futuristic feel.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Dark hero sections
• Promotional headings
• Feature callouts
• Futuristic or nightlife-inspired designs
This style works best when there is enough contrast between the text and the background.
Notes & Setup
Select your heading text in Wix Studio.
Add the class: glow-text
Paste the CSS into your site's Custom CSS section.
For best results, place it on darker backgrounds so the glow remains clearly visible.
Customisation
Glow Colour:
Change the coloured shadow values to match your palette.
Brightness:
Increase the opacity values to make the glow stronger, or reduce them for a softer effect.
Tip:
This style works best on headings and short statements rather than longer blocks of text.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
.glow-text,
.glow-text * {
color: #ffffff;
text-shadow:
0 0 8px rgba(255, 255, 255, 0.7),
0 0 18px rgba(99, 102, 241, 0.6),
0 0 32px rgba(236, 72, 153, 0.45);
display: inline-block;
}
