<div class="body">
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<h1 class="glow">Happy birthday</h1>
<q class="glow">Wilbert</br>gwapo</q>
</div>
xxxxxxxxxx
.body{
display: flex;
justify-content: center;
height: 100vh;
background: #240229;
}
.loader{
margin-top:8%;
position: relative;
width: 70%;
height: 70%;
border-radius: 5% ;
background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
animation: animate 0.5s linear infinite;
}
.loader span{
position: absolute;
width: 100%;
height: 100%;
border-radius: 5% ;
background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
animation: animate 0.5s linear infinite;
}
.loader span:nth-child(1){
filter: blur(5px);
}
.loader span:nth-child(2){
filter: blur(10px);
}
.loader span:nth-child(3){
filter: blur(25px);
}
.loader span:nth-child(4){
filter: blur(50px);
}
.loader:after{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #240229;
border-radius: 5%;
}
h1{
position: absolute;
margin: 0%;
padding: 0%;
margin-top: 12%;
letter-spacing: 5px;
color: rgb(196, 146, 230);
font-family: "Comic Sans MS", cursive, sans-serif;
}
q{
position: absolute;
margin: 0%;
padding: 0%;
margin-top: 20%;
color: rgb(196, 146, 230);
font-family: "Comic Sans MS", cursive, sans-serif;
}
.glow {
animation-duration: 1s;
animation-name: glow;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-name: glow;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@-webkit-keyframes glow {
from { text-shadow: 0 0 0px rgb(196, 146, 230); }
to { text-shadow: 0 0 20px rgb(196, 146, 230); }
}
by rald_dev