Animated Back Glow

animated-back-glow.markdown

Animated Back Glow

Psuedo Element + Background Gradient Animation + Blur = Badass

A Pen by George Hastings on CodePen.

License.

index.html

<div>BACKLIGHT</div>

style.scss

*{box-sizing: border-box;}

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

body {
  display: flex;
  align-items: center;
  font-family: monospace;
  justify-content: center;
  background-color:darken(#252B37, 4%);
}

@mixin backlight($x, $y, $spread, $size, $colorA, $colorB, $duration) {
  &:after {
    position: absolute;
    content: "";
    top: $y;
    left: $x;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    transform: scale($size);
    -webkit-filter: blur($spread);
    background: linear-gradient(270deg, $colorA, $colorB);
    background-size: 200% 200%;
    animation: animateGlow $duration ease infinite;
    
    @keyframes animateGlow {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
  }
}

div {
  position: relative;
  width: 30vw;
  height: 30vw;
  line-height: 30vw;
  text-align: center;
  color: #252B37;
  background-color: #151823;
  animation: textColor 10s ease infinite;
  @include backlight(0, 5vw, 5vw, 0.75, #0fffc1, #7e0fff, 10s);
    
  @keyframes textColor {
    0% {
      color: #7e0fff;
    }
    50% {
      color: #0fffc1;
    }
    100% {
      color: #7e0fff;
    }
  }
}