JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="bg bg-base">
  <div id="bg-animation" class="bg bg-animation">
    <div class="layer-content">
       Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.
    </div>
  </div>
</div>

CSS

.bg {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  xposition: absolute;
  width: 100%;
}

.bg-base {
  background-image: linear-gradient(to left bottom, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}

.bg-animation {
  background-image: linear-gradient(to right top, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
  opacity: 0;
}

.layer-content {
  width: 100%;
  position: relative;
}