<div class="container">
<div class="neon__frame">
<h1 class="neon__text"data-title="Look up & eat an slice" >
Pizza
</h1>
<h1 class="neon__text floating-white"data-title="Look up & eat an slice" >
Pizza
</h1>
<h1 class="neon__text floating-blue"data-title="Look up & eat an slice" >
Pizza
</h1>
</div>
</div>
body{
font-family: 'Pacifico', cursive;
}
.container{
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url(https://drive.google.com/uc?export=view&id=1trW_8rpv-_Jiihd_5LFhcykV3VD11eHv);
margin: 0;
padding: 0;
background-size:cover;
}
.neon__frame{
width: 400px;
height: auto;
border: solid 5px rgba(255,97,97,1);
text-align: center;
padding: 50px 20px;
box-shadow: 0px 0px 30px -2px rgba(255,97,97,1), inset 0px 0px 30px -2px rgba(255,97,97,1);
border-radius: 5px;
background: transparent;
position: relative;
}
.neon__frame:after{
content: "";
box-shadow: 0px 0px 22px 3px blue;
width: 100%;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.2;
}
.neon__frame:before{
content: "";
box-shadow: 0px 0px 22px 13px white;
width: 100%;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.1;
}
.neon__text{
color: rgba(255,97,97,1);
font-size: 60px;
text-shadow: 0 0 30px rgba(255,97,97,1);
position:relative;
letter-spacing: 1px;
z-index: 5;
}
.neon__text.floating-white{
color: rgba(255,97,97,1);
font-size: 60px;
text-shadow: 0 0 1px white;
position:absolute;
top: 50px; right: 0; left: 0; bottom: 0;
margin: auto;
opacity: 0.3;
letter-spacing: 1px;
}
.neon__text.floating-blue{
color: blue;
font-size: 60px;
text-shadow: 0 0 1px white;
position:absolute;
top: 50px; right: 0; left: 0; bottom: 0;
margin: auto;
opacity: 0.1;
letter-spacing: 1px;
}
This Pen doesn't use any external JavaScript resources.