How to Create Stunning Glowing Text Effects with CSS

Ready to make your text shine? In this guide, I’ll show you how to create mesmerizing glowing text effects using CSS. Imagine your website’s headings and phrases radiating with a captivating glow that grabs attention and adds a touch of magic. I’ll walk you through the entire process—starting from setting up the base styles to applying dazzling glow effects that make your text pop. You’ll get hands-on code examples and step-by-step instructions to transform your typography into a standout feature. Whether you’re sprucing up a heading or adding flair to your site, these techniques will help your text glow with style and elegance.

<!-- Glowing white text with darker navy blue background -->
<div class="bg"><div></div><div></div></div>
<div class="header-text" aria-hidden="true">
    Welcome to the Future of<br><span class="glow-filter" data-text="Tech Innovation">Tech Innovation</span><br>Empowering Tomorrow's Ideas.
</div>

<svg class="filters" width='1440px' height='300px' viewBox='0 0 1440 300' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="glow-4" color-interpolation-filters="sRGB" x="-50%" y="-200%" width="200%" Height="500%">
            <feGaussianBlur in="SourceGraphic" data-target-blur="4" stdDeviation="4" result="blur4"/>
            <feGaussianBlur in="SourceGraphic" data-target-blur="19" stdDeviation="19" result="blur19"/>
            <feGaussianBlur in="SourceGraphic" data-target-blur="9" stdDeviation="9" result="blur9"/>
            <feGaussianBlur in="SourceGraphic" data-target-blur="30" stdDeviation="30" result="blur30"/>
            <feColorMatrix in="blur4" result="color-0-blur" type="matrix" values="1 1 1 0 0
                      1 1 1 0 0
                      1 1 1 0 0
                      0 0 0 0.8 0"/>
            <feOffset in="color-0-blur" result="layer-0-offsetted" dx="0" dy="0" data-target-offset-y="0"/>
            <feColorMatrix in="blur19" result="color-1-blur" type="matrix" values="1 1 1 0 0
                      1 1 1 0 0
                      1 1 1 0 0
                      0 0 0 1 0"/>
            <feOffset in="color-1-blur" result="layer-1-offsetted" dx="0" dy="2" data-target-offset-y="2"/>
            <feColorMatrix in="blur9" result="color-2-blur" type="matrix" values="1 1 1 0 0
                      1 1 1 0 0
                      1 1 1 0 0
                      0 0 0 0.65 0"/>
            <feOffset in="color-2-blur" result="layer-2-offsetted" dx="0" dy="2" data-target-offset-y="2"/>
            <feColorMatrix in="blur30" result="color-3-blur" type="matrix" values="1 1 1 0 0
                      1 1 1 0 0
                      1 1 1 0 0
                      0 0 0 1 0"/>
            <feOffset in="color-3-blur" result="layer-3-offsetted" dx="0" dy="2" data-target-offset-y="2"/>
            <feMerge>
                <feMergeNode in="layer-0-offsetted"/>
                <feMergeNode in="layer-1-offsetted"/>
                <feMergeNode in="layer-2-offsetted"/>
                <feMergeNode in="layer-3-offsetted"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
</svg>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { height: 100%; overflow: hidden;}

body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: Poppins;
    background: linear-gradient(135deg, #00203f, #1e3a5f, #213654); /* Navy blue background */
    font-size: calc(var(--_size) * 0.026); /* Increased font size */
    --_factor: min(1000px, 100vh);
    --_size: min(var(--_factor), 100vw);
}
svg.filters { display: none; }
.header-text {
    color: #ffffff;
    font-size: 3.5em; /* Increased header font size */
    text-align: center;
    line-height: 1.0625;
    font-weight: 600;
    letter-spacing: -0.009em;
}
.glow-filter{
    position: relative;
    display: inline-block;
    scale: 1;
    animation: onloadscale 1s ease-out forwards;
}
.glow-filter::before{
    content: attr(data-text);
    position: absolute;
    pointer-events: none;
    color: #ffffff; /* Text color set to white */
    filter: url(#glow-4); /* White glow effect */
    opacity: 0;
    animation: onloadopacity 1s ease-out forwards;
}
@keyframes onloadscale {
    24% { scale: 1; }
    100% { scale: 1.02; }
}
@keyframes onloadopacity {
    24% { opacity: 0; }
    100% { opacity: 1; }
}

p {
    position: absolute;
    color:  #ffffff;
    font-weight: 600;
    background: linear-gradient(0deg,#ffffff 0%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    top: 0; bottom: 0; margin: auto;
    height: fit-content;
    translate: 0 12em;
    max-width: 30em;
    text-align: center;
    font-size: 1.5em; /* Increased paragraph font size */
}
p span {
    position: relative;
    display: inline-block;
    -webkit-text-fill-color:#ffffff;
    background: #000;
    border-radius: 4px;
    padding: 0.3em 0.6em;
}
.bg {
    z-index: -1;
    position: fixed;
    inset: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.bg > div {
    flex-grow: 1;
    background: linear-gradient(45deg,#ffffff 0%,#ffffff 100%);
    filter: blur(1em);
    opacity: 0.1;
    border-radius: 50%;
}
</style>

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

×