CodePen Embed - Sharp & Glowing dark card

<div role="button">
  <span class="glow"></span>
  <div>
    <span>cool</span>Glowing shadows
  </div>
</div>

@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2 supports variations"),
    url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2-variations");
  font-weight: 100 1000;
}

@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --rotate {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-translate-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-size {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-blur {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}

@property --glow-radius {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}

@property --white-shadow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  // utilities
  --debug: 0;
  --supported: 0;
  --not-supported: 0;

  // Pen vars
  --card-color: hsl(260deg 100% 3%);
  --text-color: hsl(260deg 10% 55%);
  --card-radius: 3.6vw;
  --card-width: 35vw;
  --border-width: 3px;
  --bg-size: 1;

  --hue: 0;
  --hue-speed: 1;

  --rotate: 0;
  --animation-speed: 4s;

  --interaction-speed: 0.55s;
  --glow-scale: 1.5;
  --scale-factor: 1;
  --glow-blur: 6; // 6
  --glow-opacity: 1; // 0.6
  --glow-radius: 100; // 100
  --glow-rotate-unit: 1deg;
}

body::before,
body::after {
  content: "CSS.registerProperty is supported ✅";
  position: absolute;
  display: block;
  top: 8px;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(100% - 160px);
  max-width: 380px;
  height: auto;
  padding: 8px;
  border-radius: 8px;
  background: hsl(114deg 51% 48%);
  color: white;
  text-align: center;
  font-family: sans-serif;
  z-index: var(--supported, 0);
  opacity: var(--supported, 0);
}

body::after {
  content: "CSS.registerProperty is NOT supported ❌";
  background: hsl(0deg 51% 48%);
  z-index: var(--not-supported, 0);
  opacity: var(--not-supported, 0);
}
body::before,
body::after {
  display: none !important;
}

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  outline: calc(var(--debug) * 1px) red dashed;
}

body {
  background-color: var(--card-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Mona Sans", sans-serif;
}

body > div {
  width: var(--card-width);
  width: min(480px, var(--card-width));
  aspect-ratio: 1.5/1;
  color: white;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border-radius: var(--card-radius);
  cursor: pointer;

  &:hover {
    > div {
      mix-blend-mode: darken;
      --text-color: white;
      box-shadow: 0 0 calc(var(--white-shadow) * 1vw)
        calc(var(--white-shadow) * 0.15vw) rgb(255 255 255 / 20%);
      animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
      &:before {
        --bg-size: 15;
        animation-play-state: paused;
        transition: --bg-size var(--interaction-speed) ease;
      }
    }
    .glow {
      --glow-blur: 1.5;
      --glow-opacity: 0.6;
      --glow-scale: 2.5;
      --glow-radius: 0;
      --rotate: 900;
      --glow-rotate-unit: 0;
      --scale-factor: 1.25;
      animation-play-state: paused;

      &:after {
        --glow-translate-y: 0;
        animation-play-state: paused;
        transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease,
          --glow-opacity 0.05s ease, --glow-scale 0.05s ease,
          --glow-radius 0.05s ease;
      }
    }
  }

  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
  }

  > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--card-color);
    border-radius: calc(calc(var(--card-radius) * 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-transform: uppercase;
    font-stretch: 150%;
    font-size: 18px;
    font-size: clamp(1.5vw, 1.5vmin, 32px);
    color: var(--text-color);
    padding: calc(var(--card-width) / 8);

    span {
      display: inline-block;
      padding: 0.25em;
      border-radius: 4px;
      background: var(--text-color);
      color: black;
      margin-right: 8px;
      font-weight: 900;
    }

    &:before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: calc(calc(var(--card-radius) * 0.9));
      box-shadow: 0 0 20px black;
      mix-blend-mode: color-burn;
      z-index: -1;
      background: hsl(0deg 0% 16%)
        radial-gradient(
          30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%),
          hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg) 100% 90%)
            calc(0% * var(--bg-size)),
          hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg) 100% 80%)
            calc(20% * var(--bg-size)),
          hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg) 100% 60%)
            calc(40% * var(--bg-size)),
          transparent 100%
        );
      width: calc(100% + var(--border-width));
      height: calc(100% + var(--border-width));
      animation: hue-animation var(--animation-speed) linear infinite,
        rotate-bg var(--animation-speed) linear infinite;
      transition: --bg-size var(--interaction-speed) ease;
    }
  }

  .glow {
    --glow-translate-y: 0;
    display: block;
    position: absolute;
    width: calc(var(--card-width) / 5);
    height: calc(var(--card-width) / 5);
    animation: rotate var(--animation-speed) linear infinite;
    transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
    transform-origin: center;
    border-radius: calc(var(--glow-radius) * 10vw);

    &:after {
      content: "";
      display: block;
      z-index: -2;
      filter: blur(calc(var(--glow-blur) * 10px));
      width: 130%;
      height: 130%;
      left: -15%;
      top: -15%;
      background: hsl(
        calc(calc(var(--hue) * var(--hue-speed)) * 1deg) 100% 60%
      );
      position: relative;
      border-radius: calc(var(--glow-radius) * 10vw);
      animation: hue-animation var(--animation-speed) linear infinite;
      transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1))
        scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2))
        translateY(calc(var(--glow-translate-y) * 1%));
      opacity: var(--glow-opacity);
    }
  }
}

@keyframes shadow-pulse {
  0%,
  24%,
  46%,
  73%,
  96% {
    --white-shadow: 0.5;
  }
  12%,
  28%,
  41%,
  63%,
  75%,
  82%,
  98% {
    --white-shadow: 2.5;
  }
  6%,
  32%,
  57% {
    --white-shadow: 1.3;
  }
  18%,
  52%,
  88% {
    --white-shadow: 3.5;
  }
}

@keyframes rotate-bg {
  0% {
    --bg-x: 0;
    --bg-y: 0;
  }

  25% {
    --bg-x: 100;
    --bg-y: 0;
  }

  50% {
    --bg-x: 100;
    --bg-y: 100;
  }

  75% {
    --bg-x: 0;
    --bg-y: 100;
  }

  100% {
    --bg-x: 0;
    --bg-y: 0;
  }
}
@keyframes rotate {
  from {
    --rotate: -70;
    --glow-translate-y: -65;
  }

  25% {
    --glow-translate-y: -65;
  }

  50% {
    --glow-translate-y: -65;
  }

  60%,
  75% {
    --glow-translate-y: -65;
  }

  85% {
    --glow-translate-y: -65;
  }

  to {
    --rotate: calc(360 - 70);
    --glow-translate-y: -65;
  }
}
@keyframes hue-animation {
  0% {
    --hue: 0;
  }
  100% {
    --hue: 360;
  }
}

View Compiled

// Credit: @LukyVj
// https://twitter.com/LukyVj
// https://lucasbonomi.com






if (typeof window.CSS.registerProperty === 'function') {
  console.log('CSS.registerProperty supported 🎉')
  document.body.style.setProperty('--supported', 1);
  document.body.classList.add('registerProperty-supported')
} else {
  console.log('CSS.registerProperty not supported ❌')
  document.body.style.setProperty('--not-supported', 1);
  document.body.classList.add('registerProperty-not-supported')
}

This Pen is owned by LukyVJ on CodePen.

See more by @LukyVj on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.