EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
  margin: 0;
  background-color: #1f5673;
}

@keyframes anim {
  50% {
    filter: blur(6px);
    transform: translateY(-30px);
  }
}
@keyframes drop {
  80% {
    opacity: 0.6;
  }
  100% {
    transform: scaleX(0.4) translateY(20.8333333333vh);
  }
}
.circle, .drop {
  mix-blend-mode: overlay;
}

.circle {
  height: 50vh;
  width: 50vh;
  position: absolute;
  top: 50vh;
  left: 50vw;
  margin: -25vh;
  transform: rotateX(70deg) translateY(50vh);
  overflow: visible;
}
.circle > circle {
  fill: none;
  stroke: #fff;
  filter: blur(10px);
  animation: anim 1.3s infinite;
  opacity: 1;
}

.circle > circle:nth-child(1) {
  animation-delay: 0.1857142857s;
  opacity: 0.95;
}

.circle > circle:nth-child(2) {
  animation-delay: 0.3714285714s;
  opacity: 0.9;
}

.circle > circle:nth-child(3) {
  animation-delay: 0.5571428571s;
  opacity: 0.85;
}

.circle > circle:nth-child(4) {
  animation-delay: 0.7428571429s;
  opacity: 0.8;
}

.circle > circle:nth-child(5) {
  animation-delay: 0.9285714286s;
  opacity: 0.75;
}

.circle > circle:nth-child(6) {
  animation-delay: 1.1142857143s;
  opacity: 0.7;
}

.circle > circle:nth-child(7) {
  animation-delay: 1.3s;
  opacity: 0.65;
}

.circle > circle:nth-child(8) {
  animation-delay: 1.4857142857s;
  opacity: 0.6;
}

.circle > circle:nth-child(9) {
  animation-delay: 1.6714285714s;
  opacity: 0.55;
}

.circle > circle:nth-child(10) {
  animation-delay: 1.8571428571s;
  opacity: 0.5;
}

.circle > circle:nth-child(11) {
  animation-delay: 2.0428571429s;
  opacity: 0.45;
}

.circle > circle:nth-child(12) {
  animation-delay: 2.2285714286s;
  opacity: 0.4;
}

.circle > circle:nth-child(13) {
  animation-delay: 2.4142857143s;
  opacity: 0.35;
}

.circle > circle:nth-child(14) {
  animation-delay: 2.6s;
  opacity: 0.3;
}

.circle > circle:nth-child(15) {
  animation-delay: 2.7857142857s;
  opacity: 0.25;
}

.circle > circle:nth-child(16) {
  animation-delay: 2.9714285714s;
  opacity: 0.2;
}

.circle > circle:nth-child(17) {
  animation-delay: 3.1571428571s;
  opacity: 0.15;
}

.circle > circle:nth-child(18) {
  animation-delay: 3.3428571429s;
  opacity: 0.1;
}

.circle > circle:nth-child(19) {
  animation-delay: 3.5285714286s;
  opacity: 0.05;
}

.circle > circle:nth-child(20) {
  animation-delay: 3.7142857143s;
  opacity: 0;
}

.drop {
  heigth: 6vh;
  width: 6vh;
  position: absolute;
  top: 50vh;
  left: 50vw;
  margin: -3vh;
  opacity: 0;
  transform: scaleX(0.2) translateY(-100vh);
  animation: drop 1.3s infinite ease-in;
  animation-delay: 1.0833333333s;
}
.drop > div {
  height: 3vh;
  width: 3vh;
  margin: 0 auto;
  transform: rotate(45deg);
  opacity: 0.7;
  border-radius: 0 100% 80% 100%;
  background-color: #fff;
  filter: blur(2px);
}

.light {
  height: 100vh;
  width: 100vw;
  position: absolute;
}
.light > div {
  position: absolute;
  height: 50vh;
  width: 50vh;
  border-radius: 50%;
  filter: blur(250px);
  mix-blend-mode: color-dodge;
}
.light > div:nth-child(1) {
  background-color: #90c3c8;
  right: 0;
}
.light > div:nth-child(2) {
  background-color: #b9b8d3;
  bottom: 0;
}

HTML

Recommendation

Join Effecthub.com