Floating background elements add beautiful paralax depth to web design! This implementation generates tiny CSS shapes that utilize long-duration Keyframes to naturally drift upward out of view.

Randomizing CSS Timing

To prevent the lanterns from moving in a boring block, we randomize animation-duration and animation-delay inline.

<!-- Inside the DOM -->
<div class="lantern" style="left: 10%; animation-duration: 15s; animation-delay: 2s;"></div>
<div class="lantern" style="left: 45%; animation-duration: 25s; animation-delay: 0s;"></div>

The Lantern Body

.lantern {
  position: absolute;
  width: 15px; height: 25px;
  background: #fde047;
  border-radius: 3px 3px 8px 8px;
  box-shadow: 0 0 15px #ea580c;
  bottom: -50px;
  animation-name: floatSky;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes floatSky {
  to { transform: translateY(-120vh) rotate(15deg); opacity: 0; }
}

Check out the incredibly zen, starry backdrop filled with these roaming orange lights in the Live Demo.