<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.