<div class='sky'>
<div class='stars'></div>
<h3>Night Sky & Stars With Gradient Background</h3>
</div>
.sky {
position: absolute;
width: 100%;
background: #4b79a1; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#283e51,
#0a2342
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#283e51,
#0a2342
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: -olinear-gradient(to top, #283e51, #0a2342);
height: 100vh;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
background: url(http://www.script-tutorials.com/demos/360/images/stars.png)
repeat top center;
z-index: 0;
}
h3 {
font-family: "Rammetto One";
text-align: center;
font-size: 1.75rem;
color: #fff;
width: 55%;
margin: 5rem auto;
line-height: 3rem;
letter-spacing: 5px;
}
/*****************************************
Check out Nat's pen with animated SVG weather icons.
https://codepen.io/nsayenko/pen/JKzxdm/
*******************************************/
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.