EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #455772;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #455772), color-stop(18%, #6b8395), color-stop(35%, #a0d0cc), color-stop(45%, #a0d0cc), color-stop(60%, #a0d0cc), color-stop(81%, #56737c), color-stop(100%, #293e56));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#455772', endColorstr='#293e56',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.accelerate, .particle1, .particle2, .orb, .orb1 {
  transform: translateZ(0);
  perspective: 1000;
  backface-visibility: hidden;
}

.particle1 {
  width: 200vw;
  height: 100vh;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles2.png");
  position: absolute;
  z-index: 1000;
  opacity: 0.45;
  overflow: hidden;
  animation: particleOne 200s linear infinite;
  filter: blur(4px) brightness(0.9);
  -webkit-filter: blur(4px) brightness(0.9);
}

.particle2 {
  width: 200vw;
  height: 100vh;
  filter: blur(1px) hue-rotate(-8deg);
  -webkit-filter: blur(1px) hue-rotate(-8deg);
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles3.png");
  position: absolute;
  z-index: 1000;
  opacity: 0.45;
  overflow: hidden;
  animation: particleOne 260s linear infinite;
}

.orb {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png");
  width: 500px;
  height: 356px;
  position: absolute;
  left: 50%;
  opacity: 0.8;
  z-index: 50;
  animation: orb 2s ease infinite;
}

.orb1 {
  position: absolute;
}

.orb2 {
  top: 30%;
  left: 10%;
  opacity: 0.85;
  z-index: 50;
  filter: blur(1px) hue-rotate(-8deg);
  -webkit-filter: blur(1px) hue-rotate(-8deg);
  animation: orb2 70s ease-out infinite;
}
.orb2 img {
  width: 40%;
  height: auto;
}

.orb3 {
  top: 4%;
  left: 80%;
  opacity: 0.6;
  z-index: 20;
  filter: blur(2px) hue-rotate(15deg);
  -webkit-filter: blur(2px) hue-rotate(15deg);
  animation: orb2 70s ease-out infinite;
}
.orb3 img {
  width: 30%;
  height: auto;
}

@keyframes particleOne {
  50% {
    transform: translateX(200%);
  }
}
@keyframes orb {
  50% {
    transform: translateY(-5px);
  }
}
@keyframes orb2 {
  50% {
    transform: translateX(300px);
  }
}
.blue {
  position: absolute;
  z-index: 70;
  opacity: 0.2;
  top: 45%;
  width: 100%;
  height: 10%;
  box-shadow: 0px 0px 50px 50px #8EB7BA;
  background: #8EB7BA;
}

.land {
  width: 100%;
  height: auto;
  bottom: 0;
  position: absolute;
}
.land img {
  width: 100%;
  height: auto;
}

@media screen and (max-height: 400px) {
  .land {
    bottom: -55%;
  }
}
@media screen and (max-width: 620px) {
  .orb {
    left: 10% !important;
  }

.orb3 {
    left: -2% !important;
  }
}

HTML

Recommendation

Join Effecthub.com