<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<div id='title'>
<span>
PURE CSS
</span>
<br>
<span>
PARALLAX PIXEL STARS
</span>
</div>
html {
height: 100%;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
}
#stars {
width: 1px;
height: 1px;
background: transparent;
box-shadow: 483px 450px #FFF , 1995px 525px #FFF , 755px 1459px #FFF , 610px 1246px #FFF , 764px 1850px #FFF , 1274px 1697px #FFF , 1227px 37px #FFF , 1090px 506px #FFF , 341px 1005px #FFF , 1002px 755px #FFF , 693px 1497px #FFF , 1797px 1626px #FFF , 1838px 793px #FFF , 802px 881px #FFF , 1117px 1983px #FFF , 352px 1465px #FFF , 1526px 852px #FFF , 1559px 526px #FFF , 517px 516px #FFF , 1380px 244px #FFF , 662px 1531px #FFF , 1544px 518px #FFF , 253px 879px #FFF , 774px 1629px #FFF , 752px 994px #FFF , 1129px 726px #FFF , 232px 1050px #FFF , 1766px 290px #FFF , 1976px 842px #FFF , 662px 1535px #FFF , 257px 1016px #FFF , 665px 708px #FFF , 1476px 1772px #FFF , 261px 498px #FFF , 719px 1459px #FFF , 469px 438px #FFF , 994px 474px #FFF , 744px 808px #FFF , 1609px 1741px #FFF , 898px 260px #FFF , 1978px 1436px #FFF , 904px 1244px #FFF , 123px 773px #FFF , 6px 923px #FFF , 1973px 1778px #FFF , 1470px 1861px #FFF , 1037px 156px #FFF , 554px 1905px #FFF , 1508px 849px #FFF , 1213px 1603px #FFF , 87px 1907px #FFF , 492px 527px #FFF , 91px 213px #FFF , 492px 15px #FFF , 1357px 1157px #FFF , 637px 240px #FFF , 1515px 281px #FFF , 1757px 682px #FFF , 1035px 1298px #FFF , 1019px 1233px #FFF , 25px 162px #FFF , 262px 884px #FFF , 1328px 965px #FFF , 984px 879px #FFF , 1213px 689px #FFF , 623px 1091px #FFF , 1227px 422px #FFF , 1977px 1025px #FFF , 620px 474px #FFF , 528px 1525px #FFF;
animation: animStar 50s linear infinite;
}
#stars:after {
content: " ";
position: absolute;
top: 2000px;
width: 1px;
height: 1px;
background: transparent;
box-shadow: 483px 450px #FFF , 1995px 525px #FFF , 755px 1459px #FFF , 610px 1246px #FFF , 764px 1850px #FFF , 1274px 1697px #FFF , 1227px 37px #FFF , 1090px 506px #FFF , 341px 1005px #FFF , 1002px 755px #FFF , 693px 1497px #FFF , 1797px 1626px #FFF , 1838px 793px #FFF , 802px 881px #FFF , 1117px 1983px #FFF , 352px 1465px #FFF , 1526px 852px #FFF , 1559px 526px #FFF , 517px 516px #FFF , 1380px 244px #FFF , 662px 1531px #FFF , 1544px 518px #FFF , 253px 879px #FFF , 774px 1629px #FFF , 752px 994px #FFF , 1129px 726px #FFF , 232px 1050px #FFF , 1766px 290px #FFF , 1976px 842px #FFF , 662px 1535px #FFF , 257px 1016px #FFF , 665px 708px #FFF , 1476px 1772px #FFF , 261px 498px #FFF , 719px 1459px #FFF , 469px 438px #FFF , 994px 474px #FFF , 744px 808px #FFF , 1609px 1741px #FFF , 898px 260px #FFF , 1978px 1436px #FFF , 904px 1244px #FFF , 123px 773px #FFF , 6px 923px #FFF , 1973px 1778px #FFF , 1470px 1861px #FFF , 1037px 156px #FFF , 554px 1905px #FFF , 1508px 849px #FFF , 1213px 1603px #FFF , 87px 1907px #FFF , 492px 527px #FFF , 91px 213px #FFF , 492px 15px #FFF , 1357px 1157px #FFF , 637px 240px #FFF , 1515px 281px #FFF , 1757px 682px #FFF , 1035px 1298px #FFF , 1019px 1233px #FFF , 25px 162px #FFF , 262px 884px #FFF , 1328px 965px #FFF , 984px 879px #FFF , 1213px 689px #FFF , 623px 1091px #FFF , 1227px 422px #FFF , 1977px 1025px #FFF , 620px 474px #FFF , 528px 1525px #FFF;
}
#stars2 {
width: 2px;
height: 2px;
background: transparent;
box-shadow: 1585px 315px #FFF , 1750px 858px #FFF , 502px 1184px #FFF , 1482px 150px #FFF , 870px 93px #FFF , 1401px 1976px #FFF , 494px 1549px #FFF , 1607px 1894px #FFF , 1029px 1466px #FFF , 1931px 1390px #FFF , 819px 1431px #FFF , 521px 1062px #FFF , 1754px 574px #FFF , 577px 943px #FFF , 850px 1377px #FFF , 445px 1835px #FFF , 1658px 1675px #FFF , 521px 1144px #FFF , 560px 1624px #FFF , 1329px 1778px #FFF;
animation: animStar 100s linear infinite;
}
#stars2:after {
content: " ";
position: absolute;
top: 2000px;
width: 2px;
height: 2px;
background: transparent;
box-shadow: 1585px 315px #FFF , 1750px 858px #FFF , 502px 1184px #FFF , 1482px 150px #FFF , 870px 93px #FFF , 1401px 1976px #FFF , 494px 1549px #FFF , 1607px 1894px #FFF , 1029px 1466px #FFF , 1931px 1390px #FFF , 819px 1431px #FFF , 521px 1062px #FFF , 1754px 574px #FFF , 577px 943px #FFF , 850px 1377px #FFF , 445px 1835px #FFF , 1658px 1675px #FFF , 521px 1144px #FFF , 560px 1624px #FFF , 1329px 1778px #FFF;
}
#stars3 {
width: 3px;
height: 3px;
background: transparent;
box-shadow: 91px 409px #FFF , 1886px 728px #FFF , 1294px 970px #FFF , 720px 1215px #FFF , 796px 1431px #FFF , 834px 1217px #FFF , 1926px 1164px #FFF , 1803px 310px #FFF , 1532px 1421px #FFF , 1680px 232px #FFF;
animation: animStar 150s linear infinite;
}
#stars3:after {
content: " ";
position: absolute;
top: 2000px;
width: 3px;
height: 3px;
background: transparent;
box-shadow: 91px 409px #FFF , 1886px 728px #FFF , 1294px 970px #FFF , 720px 1215px #FFF , 796px 1431px #FFF , 834px 1217px #FFF , 1926px 1164px #FFF , 1803px 310px #FFF , 1532px 1421px #FFF , 1680px 232px #FFF;
}
#title {
position: absolute;
top: 50%;
left: 0;
right: 0;
color: #FFF;
text-align: center;
font-family: "lato", sans-serif;
font-weight: 300;
font-size: 50px;
letter-spacing: 10px;
margin-top: -60px;
padding-left: 10px;
}
#title span {
background: -webkit-linear-gradient(white, #38495a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes animStar {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.