Diese sogenannten Blobs, man könnte es auf Deutsch als Tropfen übersetzen, sieht man zur Zeit immer öfters im Webdesign. Ja es ist fast ein Trend. Diese Elemente werden als normale Formen in Webseiten eingesetzt oder sogar als ganz wilde Animationen. Heute zeige ich euch wie ihr so eine Blob Animation als Hintergrund einsetzen könnt.

Video

HTML

<section>
      <div class="container">
        <div class="blase"></div>
      </div>
      <h1>Animierter Hintergrund</h1>
    </section>

CSS

section {
  position: relative;
  height: 100vh;
  background: rgb(14, 14, 31);
  overflow: hidden;

}

h1 {
  color: #f2f2f2;
  z-index: 1;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blase {
  width: 300px;
  aspect-ratio: 1;
  background: linear-gradient(
    rgba(20, 202, 238, 0.5) 0%,
    rgba(41, 116, 221, 0.8) 40%,
    rgba(126, 26, 247, 0.8) 100%
  );
  border-radius: 30% 70% 70% 30% / 20% 60% 50% 30%;

  animation: umformen 1000ms linear infinite, drehen 1000ms linear infinite,
    bewegen 10000ms linear infinite;
  filter: blur(10px);
}

@keyframes drehen {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bewegen {
  0%,
  100% {
    transform: translate(20%, 0);
  }

  25% {
    transform: translate(280%, 20vh);
  }
  50% {
    transform: translate(205%, 50vh);
  }
  75% {
    transform: translate(50%, 60vh);
  }
}

@keyframes umformen {
  0%,
  100% {
    border-radius: 30% 70% 70% 30% / 20% 60% 50% 30%;
  }
  50% {
    border-radius: 50% 40% 50% 20% / 10% 80% 20% 30%;
  }
}