https://winstar.co.nz

NOTE: This only works on a black background

Add a code module to the divi page and paste in the code below

<div class=”text-effect”>
<!– Select the text in the preview and type in your own –>
<h1 class=”neon” data-text=”https://winstar.co.nz” >https://winstar.co.nz</h1>
<div class=”gradient”></div>
<div class=”spotlight”></div>
</div>

 

Change the https://winstar.co.nz with the text you want to show

Add the following CSS to the page css, stylesheet or divi theme css

.text-effect {
overflow: hidden;
position: relative;
filter: contrast(110%) brightness(190%);
}
.neon {
position: relative;
background: black;
color: transparent;
}
.neon::before, .neon::after {
content: attr(data-text);
color: white;
filter: blur(0.02em);
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.neon::after {
mix-blend-mode: difference;
}
.gradient, .spotlight {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
z-index: 10;
}
.gradient {
background: linear-gradient(15deg, #063b43, #e5e18a);
mix-blend-mode: multiply;
}
.spotlight {
animation: light 25s infinite linear;
background: radial-gradient(circle, #063b43, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;
top: -100%;
left: -100%;
mix-blend-mode: color-dodge;
}
@keyframes light {
100% {
transform: translate3d(50%, 50%, 0);
}
}

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
.neon {
font: 100 25x ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
.neon {
font: 100 25px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
.neon {
font: 400 110px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
.neon {
font: 400 110px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
.neon {
font: 400 110px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:1281px) { /* hi-res laptops and desktops */
.neon {
font: 400 110px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}

.neon:focus {
outline: none;
border: 1px dotted white;
}

To Change the speed of the effect

In the CSS change the number below:

animation: light 25s infinite linear;

To make the effect faster change it to a smaller number E.g.

animation: light 5s infinite linear;

To make the effect slower change it to a larger number E.g.

animation: light 50s infinite linear;

 

To Change the colour of the effect

In the CSS change the colours below:

 background: linear-gradient(15deg, #063b43, #e5e18a);