<div></div>
:root {
  --space: 6px;
  --width: 600px;
  --width-with-offset: 606px;
  
  --white-width: calc((var(--width) - var(--space) * 6) / 7);
  --white-offset: calc(var(--width-with-offset) / 7);
  --black-width: calc(var(--white-offset) / 2 - 2px);
}

BODY {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

DIV {
  position: relative;
  width: var(--width);
  height: 300px;
  border-radius: 1rem;
  overflow: hidden;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
  }

  &::before {
    content: "";
    width: calc(var(--white-width));
    height: 100%;
    background: tomato;
    border-radius: 0 0 1rem 1rem;
    box-shadow: var(--white-offset) 0 0 darkorange,
      calc(var(--white-offset) * 2) 0 0 gold,
      calc(var(--white-offset) * 3) 0 0 yellowgreen,
      calc(var(--white-offset) * 4) 0 0 lightseagreen,
      calc(var(--white-offset) * 5) 0 0 teal,
      calc(var(--white-offset) * 6) 0 0 darkslateblue;
    animation: colors 0.75s infinite;
    animation-play-state: paused;
  }

  &:hover::before {
    animation-play-state: running;
  }

  &::after {
    left: calc(var(--black-width) * 1.5);
    width: var(--black-width);
    height: 50%;
    background: black;
    border-radius: 0 0 0.5rem 0.5rem;

    box-shadow: var(--white-offset) 0 0 black,
      calc(var(--white-offset) * 3) 0 0 black,
      calc(var(--white-offset) * 4) 0 0 black,
      calc(var(--white-offset) * 5) 0 0 black;
  }
}

@keyframes colors {
  14% {
    background: darkslateblue;
    box-shadow: var(--white-offset) 0 0 tomato,
      calc(var(--white-offset) * 2) 0 0 darkorange,
      calc(var(--white-offset) * 3) 0 0 gold,
      calc(var(--white-offset) * 4) 0 0 yellowgreen,
      calc(var(--white-offset) * 5) 0 0 lightseagreen,
      calc(var(--white-offset) * 6) 0 0 teal;
  }
  28% {
    background: teal;
    box-shadow: var(--white-offset) 0 0 darkslateblue,
      calc(var(--white-offset) * 2) 0 0 tomato,
      calc(var(--white-offset) * 3) 0 0 darkorange,
      calc(var(--white-offset) * 4) 0 0 gold,
      calc(var(--white-offset) * 5) 0 0 yellowgreen,
      calc(var(--white-offset) * 6) 0 0 lightseagreen;
  }
  42% {
    background: lightseagreen;
    box-shadow: var(--white-offset) 0 0 teal,
      calc(var(--white-offset) * 2) 0 0 darkslateblue,
      calc(var(--white-offset) * 3) 0 0 tomato,
      calc(var(--white-offset) * 4) 0 0 darkorange,
      calc(var(--white-offset) * 5) 0 0 gold,
      calc(var(--white-offset) * 6) 0 0 yellowgreen;
  }
  57% {
    background: yellowgreen;
    box-shadow: var(--white-offset) 0 0 lightseagreen,
      calc(var(--white-offset) * 2) 0 0 teal,
      calc(var(--white-offset) * 3) 0 0 darkslateblue,
      calc(var(--white-offset) * 4) 0 0 tomato,
      calc(var(--white-offset) * 5) 0 0 darkorange,
      calc(var(--white-offset) * 6) 0 0 gold;
  }
  72% {
    background: gold;
    box-shadow: var(--white-offset) 0 0 yellowgreen,
      calc(var(--white-offset) * 2) 0 0 lightseagreen,
      calc(var(--white-offset) * 3) 0 0 teal,
      calc(var(--white-offset) * 4) 0 0 darkslateblue,
      calc(var(--white-offset) * 5) 0 0 tomato,
      calc(var(--white-offset) * 6) 0 0 darkorange;
  }
  86% {
    background: darkorange;
    box-shadow: var(--white-offset) 0 0 gold,
      calc(var(--white-offset) * 2) 0 0 yellowgreen,
      calc(var(--white-offset) * 3) 0 0 lightseagreen,
      calc(var(--white-offset) * 4) 0 0 teal,
      calc(var(--white-offset) * 5) 0 0 darkslateblue,
      calc(var(--white-offset) * 6) 0 0 tomato;
  }
  100% {
    background: tomato;
    box-shadow: var(--white-offset) 0 0 darkorange,
      calc(var(--white-offset) * 2) 0 0 gold,
      calc(var(--white-offset) * 3) 0 0 yellowgreen,
      calc(var(--white-offset) * 4) 0 0 lightseagreen,
      calc(var(--white-offset) * 5) 0 0 teal,
      calc(var(--white-offset) * 6) 0 0 darkslateblue;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.