Colorful Background

by Federico Tibaldo

HTML

<div id="gradient">
  <div id="gradient-content">
    <h1>
      Random gibberish to hide
      the real Brand.
    </h1>
    <p>
      Our non-existent community is definitely not large. Come join them!
    </p>
  </div>
</div>

CSS

#gradient {
  display: flex;
  width: 100%;
  height: 500px;
}

#gradient-content {
  margin: auto auto auto 50px;
  font-family: sans-serif;
  color: white;
  width: 50%;
}

#gradient {
  --grad1-angle: 68deg;
  --grad1-opacity: 0.8;
  --grad1-length: 75%;

  --grad2-angle: 126deg;
  --grad2-opacity: 0.8;
  --grad2-length: 75%;

  --grad3-angle: 214deg;
  --grad3-opacity: 0.8;
  --grad3-length: 90%;
  
  filter: saturate(1.5);
  
  background-blend-mode: multiply;

  background:
    linear-gradient(
      var(--grad1-angle),
      rgba(254, 56, 141, var(--grad1-opacity)),
      rgba(254, 56, 141, 0.2) var(--grad1-length)
    ),
    linear-gradient(
      var(--grad2-angle),
      rgba(226, 139, 193, var(--grad2-opacity)),
      rgba(226, 139, 193, 0.2) var(--grad2-length)
    ),
    linear-gradient(
      var(--grad3-angle),
      rgba(36, 125, 214, var(--grad3-opacity)),
      rgba(36, 125, 214, 0.2) var(--grad3-length)
    );
}

JavaScript

const gradientEl = document.querySelector('#gradient');

function Tween({ base, variance, unit = '', period }) {
	this.progress = 0;
  this.base = base;
  this.variance = variance;
  this.unit = unit;
  this.period = period;
}
Tween.prototype.getNextValue = function (deltaT) {
	this.progress += deltaT;
 	const relProgress = this.progress / this.period * Math.PI;
  const mulFactor = Math.sin(relProgress);
  return `${this.base + this.variance * mulFactor}${this.unit}`;
}

const tweens = [
	{
  	property: '--grad1-opacity',
    tween: new Tween({
      base: 0.8,
      variance: 0.2,
      period: 2000,
    }),
  },
  {
  	property: '--grad1-length',
    tween: new Tween({
      base: 110,
      variance: 20,
      period: 7000,
      unit: '%',
    }),
  },
  {
  	property: '--grad1-angle',
    tween: new Tween({
      base: 80,
      variance: 90,
      unit: 'deg',
      period: 12000,
    }),
  },
  {
  	property: '--grad2-angle',
    tween: new Tween({
      base: 180,
      variance: 90,
      unit: 'deg',
      period: 12000,
    }),
  },
  {
  	property: '--grad2-length',
    tween: new Tween({
      base: 100,
      variance: 10,
      unit: '%',
      period: 5000,
    }),
  },
  {
  	property: '--grad3-opacity',
    tween: new Tween({
      base: 0.85,
      variance: 0.1,
      period: 2500,
    }),
  },
  {
  	property: '--grad3-angle',
    tween: new Tween({
      base: 120,
      variance: 60,
      unit: 'deg',
      period: 8000,
    }),
  },
];

let oldT = 0;
function animate(newT) {
	window.requestAnimationFrame(animate);

	if (!oldT) {
  	oldT = newT;
    return;
	}
  const deltaT = newT - oldT;
  oldT = newT;
	
  tweens.forEach((tween) => {
  	gradientEl.style.setProperty(tween.property, tween.tween.getNextValue(deltaT));
  });
}

window.requestAnimationFrame(animate);