span Open
View Compiled
$red-color: #ff035b;
$blue-color: #04d9ff;

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw; height: 100vh;
  background: #0a0025;
  overflow: hidden;
}

span {
  font-family: 'Commissioner', sans-serif;
  font-size: 124px;
  color: #ffd6d6;
  padding: 50px 60px 60px 60px;
  line-height: 1;
  border: 10px solid #c6e2ff;
  border-radius: 50%;
  text-transform: uppercase;
  animation: flashing 1.4s infinite alternate;
}
    

@keyframes flashing {
    0%, 18%, 21%, 32%, 35%, 39%, 42%, 100% {
      text-shadow:
        0 0 16px #ffd6d6,
        0 0 16px #ffd6d6,
        0 0 32px $red-color,
        0 0 64px $red-color,
        0 0 90px $red-color,
        0 0 124px $red-color;
      box-shadow:
        0 0 8px #fff,
        inset 0 0 8px #fff,
        0 0 32px $blue-color,
        inset 0 0 32px $blue-color,
        0 0 64px $blue-color,
        inset 0 0 64px $blue-color;
    }
    20%, 34%, 41% {        
      text-shadow: none;
      box-shadow: none;
    }    
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.