Neon Glow Effect using CSS

Using Photoshop to create cool images is great and all but what about when you need dynamic content? I was working on a website recently that had some really cool design ideas and the mockups looked great… Translation: get ready for a challenge.

The design called for a “neon sign” effect with the text. The effect should look like it’s “illuminating” the wall behind it. It also needs to be responsive and we want to be able to change the text 😦

After a quick Google search I found the following sites:

• https://cssgradient.io/
• https://html-css-js.com/css/generator/text-shadow/

Using a combination of the two I was able to create the effect you see above. Check out the full CSS below

.wpb_row.black-gradient .row-bg-wrap .row-bg-overlay  {
    background:
    linear-gradient(to bottom, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 81%, rgba(8,8,8,1) 100%, rgba(8,8,8,1) 100% ),
    linear-gradient(to top, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 81%, rgba(8,8,8,1) 100%, rgba(8,8,8,1) 100% ),
    linear-gradient(to right, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 81%, rgba(8,8,8,1) 100%, rgba(8,8,8,1) 100% ),
    linear-gradient(to left, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 81%, rgba(8,8,8,1) 100%, rgba(8,8,8,1) 100% );
}
.wpb_row.black-gradient-notop .row-bg-wrap .row-bg-overlay, .black-gradient-notop-new .column-image-bg {
    background:
    linear-gradient(to bottom, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 56%, rgba(8,8,8,1) 72%, rgba(8,8,8,1) 100% ),
    linear-gradient(to top, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 96%, rgba(8,8,8,1) 100%, rgba(8,8,8,1) 100% ),
    linear-gradient(to right, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 74%, rgba(8,8,8,1) 87%, rgba(8,8,8,1) 100% ),
    linear-gradient(to left, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 74%, rgba(8,8,8,1) 87%, rgba(8,8,8,1) 100% ),
    radial-gradient(at 50% 27%,rgba(8,8,8,0) 33%,rgba(8,8,8,1) 61%)
}
.brick-nectar-slider-red h2{
        text-shadow: 0 0 5px #c6232b;
	    text-shadow: 0px 0px 2px #ad0202, 0 0px 24px #ff2c2c, 0 0 24px #c6232b, 0px 0px 24px #690f0f;
	    color:#e0868b !important;
}

.swiper-slide .slide-bg-wrap .slide-bg-overlay {
    background-color: rgba(0,0,0,0) !important;
    opacity: 1;
    background:
    linear-gradient(to bottom, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 80%, rgba(8,8,8,1) 100%, rgba(8,8,8,1) 100% ),
    linear-gradient(to top, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 50%, rgba(8,8,8,1) 100%, rgba(8,8,8,1) 100% ),
    linear-gradient(to right, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 82%, rgba(8,8,8,1) 98%, rgba(8,8,8,1) 100% ),
    linear-gradient(to left, rgba(8,8,8,0) 0, rgba(8, 8, 8, 0.01) 82%, rgba(8,8,8,1) 98%, rgba(8,8,8,1) 100% )
}
.swiper-slide .content h2 {
    font-family: Brandon Grotesque Regular;
    text-transform: uppercase;
    font-size: 50px;
    line-height: 50px;
    font-weight: 700;
    text-align: center;
}
@media only screen and (max-width: 1300px) and (min-width: 1000px) {
body #neon .nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2 {
    font-size: 50px;
    line-height: 50px;
}
}
@media only screen and (max-width: 1000px) and (min-width: 690px){
body #neon .nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2
 {
    font-size: 35px!important;
    line-height: 40px!important;
}
}
@media only screen and (max-width: 690px) {
body #neon .nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2 {
    font-size: 22px!important;
    line-height: 25px!important;
}
}