JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div>
kulturpessimist
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Zilla+Slab:600,600i,700,700i&display=swap');
body{
  padding: 10px;
}
div {
  transition: text-shadow 3s ease;
  text-shadow: none ;
  transition-delay: 2s;

  width: 100vw;
  height: 100vh;
  padding: 10%;
  background: #FFF301;
  background: #000;
  
  color: #ED008C;
  font-family: 'Zilla Slab', serif;
  font-style: italic;
  font-weight: bold;

  font-size: 8rem;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  text-align: center;

  /*text-shadow: #000000 1px 1px, #000000 0px 0px, #000000 1px 1px, #000000 2px 2px, #000000 3px 3px, #000000 4px 4px, #000000 5px 5px, #000000 6px 6px, #000000 7px 7px, #000000 8px 8px, #000000 9px 9px, #000000 10px 10px, #000000 11px 11px, #000000 12px 12px, #000000 13px 13px, #000000 14px 14px, #000000 15px 15px, #000000 16px 16px, #000000 17px 17px, #000000 18px 18px, #000000 19px 19px, #000000 20px 20px, #000000 21px 21px, #000000 22px 22px, #000000 23px 23px, #000000 24px 24px, #000000 25px 25px, #000000 26px 26px, #000000 27px 27px, #000000 28px 28px, #000000 29px 29px, #000000 30px 30px, #000000 31px 31px, #000000 32px 32px, #000000 33px 33px, #000000 34px 34px, #000000 35px 35px, #000000 36px 36px, #000000 37px 37px, #000000 38px 38px, #000000 39px 39px, #000000 40px 40px, #000000 41px 41px, #000000 42px 42px, #000000 43px 43px, #000000 44px 44px, #000000 45px 45px, #000000 46px 46px, #000000 47px 47px, #000000 48px 48px, #000000 49px 49px, #000000 50px 50px, #000000 51px 51px, #000000 52px 52px, #000000 53px 53px, #000000 54px 54px, #000000 55px 55px, #000000 56px 56px, #000000 57px 57px, #000000 58px 58px, #000000 59px 59px, #000000 60px 60px, #000000 61px 61px, #000000 62px 62px, #000000 63px 63px, #000000 64px 64px, #000000 65px 65px, #000000 66px 66px, #000000 67px 67px, #000000 68px 68px, #000000 69px 69px, #000000 70px 70px, #000000 71px 71px, #000000 72px 72px, #000000 73px 73px, #000000 74px 74px, #000000 75px 75px, #000000 76px 76px, #000000 77px...

JavaScript

(function(){
  var max = 100;
  var f = 1;
	var style = "";
  var color = `hsla(325, 100%, 46%, 1)`
  for(var i = 1;i<=max;i++){
  	style += `hsla(${325-i*3}, 100%, 46%,${(max-i)/(f*500)}) ${i*f*0.1}rem ${i*f*0.1}rem,`
    // style += `rgba(20,20,20,${(max-i)/(f*500)}) ${i*f*0.1}rem ${i*f*0.1}rem,`
  }
	style = style.substring(0, style.length-1)
  document.querySelector('div').style.textShadow = style
  // addComplexStyle('text-shadow:'+style);
})()


function addComplexStyle(s){
console.log(document.styleSheets)
  document.styleSheets[1]
    .insertRule("div { background-color:red !important; "+s+" }");
}