https://ugotsta.github.io/beatdown/?css=a53bffea384370b662f05293577c85b5&tracks=https://soundcloud.com/ugotsta/soar&gist=f06bf800ac5a88d53ec1bcaf96416531&fontsize=140&bands=32

beatdown-light-shades.css

/*
  Theme name: Light Shades
  Description: Elegant pseudo-3D visaulization for Beatdown
*/

@import url('https://fonts.googleapis.com/css?family=Lato');

:root {
--color: darkslateblue;
--scale:1.1;
--translateX:0px;
--translateY:0px;
--perspective:950px;
--rotateX:15deg;
--rotateY:4deg;
--rotateZ:3deg;
--translateZ:0px;
}

/* BeatDown styling */

#wrapper {
  transform-style: preserve-3d;
}

.inner {
  position: fixed;
  transform:
    scale(var(--scale))
    translateX(var(--translateX))
    translateY(var(--translateY))
    perspective(var(--perspective))
    rotateX(var(--rotateX))
    rotateY(var(--rotateY))
    rotateZ(var(--rotateZ))
    translateZ(var(--translateZ));
  padding: 50%;
  transform-origin: center;
}

#custom .inner * {
  transform-style: preserve-3d;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    background: black;
    text-shadow: 0 2px 6px rgba(255,255,255,0.45);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}

#custom .section {
    position: fixed;
    max-width: unset;
    min-width: unset;
    max-height: unset;
    min-height: unset;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 85vw;
    overflow: initial;
    background: none;
    box-shadow: none;
    border: none;
    mix-blend-mode: hard-light;
    filter: brightness(85%);
    transform: translateY(19%);
}

#custom .inner::before {
    pointer-events: none;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, #eeeeee 0%,#d0d0d0 100%);
}

#custom .inner {
  background: none;
  font-size: 140%;
}

.section a {
  color: unset;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,0,0,0.15);
}

#custom .section a:hover {
    border-radius: 3px;
    box-shadow: inset 0 0 40px DarkSlateBlue, 0 0 10px DarkSlateBlue;
}

#custom .section a.handle {
  font-family: 'Lato';
  font-weight: 900;
  border: none;
}

/* Lyric mode styling */
#custom .gd-lyrics .section {
    background: none;
    border: none;
    box-shadow: none;
}

#gd-beatdown .handle-heading {
    position: absolute;
    top: -1.75em;
    font-size: 3em;
    filter: contrast(0.35);
}

/* EQ */

#custom .eq {
    pointer-events: none;
    position: fixed;
    max-width: unset;
    min-width: unset;
    max-height: unset;
    min-height: unset;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: auto;
    width: 85vw;
    /* height: 300px; */
    background: none;
    opacity: 1;
    z-index: 1;
    mix-blend-mode: normal;
    transform: translateY(40%);
}

#custom .eq .band {
  box-shadow: none;
  background: DarkSlateBlue;
  margin-right: 0.5em;
}

#custom .eq .band::after {
    position: absolute;
    content: "";
    pointer-events: none;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
    height: 10%;
    top: 90%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 30%,rgba(0,0,0,0.5) 100%);
    transform-style: flat;
    transform: scale(-1) perspective(600px) rotateX(-29deg) translateY(4px);
    transform-origin: bottom;
    filter: blur(4px);
}