<div id="overlay"><h1>WELCOME 2 DA FUTURE</h1></div>
<div id="hey"><div id="layer-up"></div></div>
<div id="layer-0">
<div id="layer-1">
<div id="layer-2">
<div id="lines">
<div id="layer-corner"></div>
</div>
</div>
</div>
</div>
<div id="mtnZZZ"></div>
body {
background: radial-gradient(ellipse at center, rgba(127,0,173,0.6) 0%,
rgba(0,0,0,0.8) 60%,
rgba(0,0,0,1) 90%),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/31787/stars.jpg);
background-size: cover;
z-index:-5;
color: white;
overflow: hidden;
font-family: 'Monoton', monospace;
font-size: 2em;
}
h1 {
animation: neon1 1.5s ease-in-out infinite alternate;
}
#overlay {
position: absolute;
right: 0;
left: 0;
margin: auto;
width: 100%;
text-align: center;
}
#layer-0 {
background: rgba(92,71,255,0);
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(255,71,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(92,71,255,0)), color-stop(25%, rgba(0,0,0,1)), color-stop(100%, rgba(255,71,255,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,1)) 0%, rgba(0,0,0,1) 25%, rgba(255,71,255,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1)) 25%, rgba(255,71,255,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(255,71,255,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(255,71,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c47ff', endColorstr='#ff47ff', GradientType=0 );
height:400px;
width:200vw;
opacity:1;
position:absolute;
bottom:0;
left:0;
right: 0;
margin: 0 -50%;
overflow: hidden;
transform: perspective(200px) rotateX(60deg);
z-index: -5;
}
#layer-1 {
background: rgba(92,71,255,1);
background: -moz-linear-gradient(45deg, rgba(92,71,255,1) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,0) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(92,71,255,1)), color-stop(50%, rgba(92,71,255,0)), color-stop(100%, rgba(92,71,255,0)));
background: -webkit-linear-gradient(45deg, rgba(92,71,255,1) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,0) 100%);
background: -o-linear-gradient(45deg, rgba(92,71,255,1) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,0) 100%);
background: -ms-linear-gradient(45deg, rgba(92,71,255,1) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,0) 100%);
background: linear-gradient(45deg, rgba(92,71,255,1) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c47ff', endColorstr='#5c47ff', GradientType=1 );
height: inherit;
width: inherit;
opacity:1;
position:absolute;
top:0;
left:0;
right: 0;
margin: auto;
z-index: -5;
}
#layer-2 {
background: rgba(92,71,255,0);
background: -moz-linear-gradient(-45deg, rgba(92,71,255,0) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(92,71,255,0)), color-stop(50%, rgba(92,71,255,0)), color-stop(100%, rgba(92,71,255,1)));
background: -webkit-linear-gradient(-45deg, rgba(92,71,255,0) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,1) 100%);
background: -o-linear-gradient(-45deg, rgba(92,71,255,0) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(92,71,255,0) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,1) 100%);
background: linear-gradient(135deg, rgba(92,71,255,0) 0%, rgba(92,71,255,0) 50%, rgba(92,71,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c47ff', endColorstr='#5c47ff', GradientType=1 );
height: inherit;
width: inherit;
opacity:1;
position:absolute;
top:0;
left:0;
right: 0;
margin: auto;
z-index: -5;
}
#layer-corner {
background: rgba(71,255,203,1);
background: -moz-linear-gradient(top, rgba(71,255,203,1) 0%, rgba(96,130,223,0) 54%, rgba(117,24,240,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(71,255,203,1)), color-stop(54%, rgba(96,130,223,0)), color-stop(100%, rgba(117,24,240,0)));
background: -webkit-linear-gradient(top, rgba(71,255,203,1) 0%, rgba(96,130,223,0) 54%, rgba(117,24,240,0) 100%);
background: -o-linear-gradient(top, rgba(71,255,203,1) 0%, rgba(96,130,223,0) 54%, rgba(117,24,240,0) 100%);
background: -ms-linear-gradient(top, rgba(71,255,203,1) 0%, rgba(96,130,223,0) 54%, rgba(117,24,240,0) 100%);
background: linear-gradient(to bottom, rgba(71,255,203,1) 0%, rgba(96,130,223,0) 54%, rgba(117,24,240,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47ffcb', endColorstr='#7518f0', GradientType=0 );
height: inherit;
width: inherit;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: -5;
animation: layercorneranim 2.5s ease-in-out infinite alternate;
}
#hey {
width: 100%;
background-color: #011;
position: absolute;
bottom: 253px; right: 0; left: 0;
margin: auto;
z-index: -10;
transform: perspective(200px);
}
#layer-up {
background: rgba(71,255,203,0);
background: -moz-linear-gradient(top, rgba(71,255,203,0) 0%, rgba(71,255,203,0) 50%, rgba(71,255,203,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(71,255,203,0)), color-stop(50%, rgba(71,255,203,0)), color-stop(100%, rgba(71,255,203,1)));
background: -webkit-linear-gradient(top, rgba(71,255,203,0) 0%, rgba(71,255,203,0) 54%, rgba(71,255,203,1) 100%);
background: -o-linear-gradient(top, rgba(71,255,203,0) 0%, rgba(71,255,203,0) 50%, rgba(71,255,203,1) 100%);
background: -ms-linear-gradient(top, rgba(71,255,203,0) 0%, rgba(71,255,203,0) 50%, rgba(71,255,203,1) 100%);
background: linear-gradient(to bottom, rgba(71,255,203,0) 0%, rgba(71,255,203,0) 50%, rgba(71,255,203,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47ffcb', endColorstr='#47ffcb', GradientType=0 );
height:300px;
width: inherit;
opacity: 1;
position: absolute;
bottom:0; left:0; right: 0; margin: auto;
overflow: hidden;
z-index: -5;
animation: layerupanim 2.5s ease-in-out infinite alternate;
}
#lines {
background-size: 40px 40px;
background-image: repeating-linear-gradient(0deg, #60DCD3, #60DCD3 2px, transparent 1px, transparent 40px),repeating-linear-gradient(-90deg, #60DCD3, #60DCD3 2px, transparent 2px, transparent 40px);
height:400px;
width:100%;
opacity:1;
position:absolute;
top:0;
left:0;
z-index:-4;
}
#mtn {
background-color: purple;
height:300px;
width:1200px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: -8;
transform: perspective(600px);
}
@keyframes neon1 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF11A7, 0 0 70px #FF11A7, 0 0 80px #FF11A7, 0 0 100px #FF11A7, 0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF11A7, 0 0 35px #FF11A7, 0 0 40px #FF11A7, 0 0 50px #FF11A7, 0 0 75px #FF11A7;
}
}
@keyframes layerupanim
{
from {
height: 140px;
}
to {
height: 155px;
}
}
@keyframes layercorneranim
{
from {
height: 400px;
}
to {
height: 540px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.