h2.neon Pop's
h2.neon 
  | din
  span e
  | r
h2.neon & bar

.deco
  - for(var x = 1;x <= 4;x++)
    .line
View Compiled
html { background: #003645; }

body {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  background: radial-gradient(ellipse at center, rgba(black, .03) 50%,rgba(black, .7) 100%);
  height: 100vh;  
  margin: 0;
  overflow: hidden;
}

.neon {
  flex: 0 0 100%;
  padding: 2vw 0;
  margin: 0;
  color: transparent;
  text-align: center; 
  z-index: 5;
  -webkit-user-select: none;
  &:nth-of-type(1) {
    font: 9vw Warnes;  
    text-shadow: 0 0 .1vw #F3BCBC, 0 0 .5vw #F12F21, 0 0 1.5vw #f00;
  }
  &:nth-of-type(2) {
    font: 22vw 'Hello Denver';
    text-transform: uppercase;
    text-shadow: 0 0 .1vw #F7CEEA, .5vw .5vw .5vw #E0018D, -.5vw -.5vw .5vw #E0018D, .5vw -.5vw .5vw #E0018D, -.5vw .5vw .5vw #E0018D, 0 -.5vw .5vw #E0018D, 0 .5vw .5vw #E0018D, .5vw .5vw .5vw #E0018D, 0 0 5vw #000;
    letter-spacing: 2vw;
    span {
      animation: Flicker .23s infinite;
    }
  }
  &:nth-of-type(3) {
    font: 13vw 'Neon Lights', 'Hello Denver';
    text-transform: uppercase;
    text-shadow: 0 0 .1vw #95B4DA, 0 0 1vw #008EFF;
  }
}

.deco {
  position: absolute;
  top: 0; bottom: 0;
  right: 0; left: 0;
  margin: auto;
  height: 27.5vw;
  z-index: 0;
  .line {
    box-sizing: border-box;
    border-radius: 1.5vw;
    box-shadow: 0 0 1vw 1.2vw #024B5D;
    height: 3vw;
    width: 90%;
    margin: 3vw auto;
    background: #ACDAB8;
    border: 1.3vw solid #FEFAC8;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: .5vw;
      width: 100%;
      background: #ACDAB8;
      box-shadow: 0 0 .2vw .2vw #ACDAB8;
      border-radius: .3vw; 
    }
  }
}

@keyframes Flicker {
  60%, 80% {
    text-shadow: 0 0 .1vw #DCD5DA, .5vw .5vw .5vw rgba(224, 1, 141, 0.2), -.5vw -.5vw .5vw rgba(224, 1, 141, 0.2), .5vw -.5vw .5vw rgba(224, 1, 141, 0.2), -.5vw .5vw .5vw rgba(224, 1, 141, 0.2), 0 -.5vw .5vw rgba(224, 1, 141, 0.2), 0 .5vw .5vw rgba(224, 1, 141, 0.2), .5vw 0 .5vw rgba(224, 1, 141, 0.2), 0 0 #FFF;
  }
  70%, 100% {
    text-shadow: 0 0 .1vw #FFEFFA, .8vw .8vw .8vw rgba(224, 1, 141, 0.4), -.8vw -.8vw .8vw rgba(224, 1, 141, 0.4), .8vw -.8vw .8vw rgba(224, 1, 141, 0.4), -.8vw .8vw .5vw rgba(224, 1, 141, 0.4), 0 -.8vw .5vw rgba(224, 1, 141, 0.4), 0 .8vw .8vw rgba(224, 1, 141, 0.4);
  }
}
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.