Animated Glowing Neon Sign Effect with HTML and CSS

40 0 Text Effects mzierenberg1 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Animated Glowing Neon Sign Effect with HTML and CSS

body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #050408;
      /* Multi-color ambient wall glow + dark brick wall texture */
      background-image: 
        radial-gradient(circle at 35% 50%, rgba(255, 102, 0, 0.25) 0%, transparent 55%),
        radial-gradient(circle at 70% 50%, rgba(0, 240, 255, 0.2) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 170, 0.18) 0%, rgba(5, 4, 8, 0.96) 72%),
        linear-gradient(335deg, #0e0b14 23px, transparent 23px),
        linear-gradient(155deg, #0e0b14 23px, transparent 23px),
        linear-gradient(335deg, #09070d 23px, transparent 23px),
        linear-gradient(155deg, #09070d 23px, transparent 23px);
      background-size: 100% 100%, 100% 100%, 100% 100%, 58px 58px, 58px 58px, 58px 58px, 58px 58px;
      background-position: center, center, center, 0px 2px, 4px 35px, 29px 31px, 34px 6px;
      overflow: hidden;
    }

/* Wrapper with multi-color ambient wall cast */
    .sign-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 6px;
      border-radius: 30px;
      box-shadow:
        -25px 0 80px rgba(255, 0, 170, 0.45),
        25px 0 80px rgba(0, 240, 255, 0.45),
        0 0 140px rgba(255, 102, 0, 0.4);
    }

/* Spinning multi-color neon energy beam around the frame */
    .sign-wrapper::before {
      content: "";
      position: absolute;
      inset: -5px;
      border-radius: 33px;
      background: conic-gradient(
        from var(--angle, 0deg),
        #ff6a00,
        #ff00aa,
        #7000ff,
        #00f0ff,
        #00ff88,
        #ffea00,
        #ff6a00
      );
      animation: rotate-glow 3.5s linear infinite;
      z-index: 0;
      filter: blur(4px);
    }

/* Outer electric cyan & magenta glass tube */
    .neon-outer-border {
      position: relative;
      z-index: 1;
      padding: 13px;
      background: rgba(8, 6, 14, 0.92);
      border: 4px solid #e0ffff;
      border-radius: 26px;
      box-shadow:
        0 0 10px #fff,
        0 0 22px #00f0ff,
        0 0 48px #00b8ff,
        inset 0 0 14px #00f0ff;
    }

/* Inner hot magenta glass tube */
    .neon-inner-border {
      padding: clamp(1.5rem, 3.8vw, 2.8rem) clamp(2.4rem, 6vw, 5rem);
      border: 3px solid #ffe6f7;
      border-radius: 16px;
      box-shadow:
        0 0 8px #fff,
        0 0 18px #ff00aa,
        inset 0 0 12px #fff,
        inset 0 0 26px #ff00aa,
        inset 0 0 55px #9d00ff;
    }

/* Bright orange text with subtle gold-red depth */
    .neon-sign {
      font-family: 'Quicksand', sans-serif;
      font-size: clamp(2.6rem, 8.5vw, 6.5rem);
      font-weight: 600;
      letter-spacing: 0.07em;
      color: #ffffff;
      text-shadow:
        0 0 4px #ffffff,
        0 0 10px #ffffff,
        0 0 20px #ffbe0b,
        0 0 38px #ff7b00,
        0 0 65px #ff5400,
        0 0 105px #ff0055,
        0 0 150px #ff00aa;
      animation: power-surge 3.5s infinite alternate;
      user-select: none;
    }

@property --angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }

@keyframes rotate-glow {
      to {
        --angle: 360deg;
      }
    }

@keyframes power-surge {
      0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
        transform: scale(1);
        text-shadow:
          0 0 4px #ffffff,
          0 0 10px #ffffff,
          0 0 20px #ffbe0b,
          0 0 38px #ff7b00,
          0 0 65px #ff5400,
          0 0 105px #ff0055,
          0 0 150px #ff00aa;
      }
      20%, 55% {
        opacity: 0.88;
        transform: scale(0.997);
        text-shadow:
          0 0 2px #ffffff,
          0 0 14px #ff8800,
          0 0 32px #ff0077;
      }
    }
  </style>
</head>
<body>

<div class="sign-wrapper">
    <div class="neon-outer-border">
      <div class="neon-inner-border">
        <div class="neon-sign">mzierenberg</div>
      </div>
    </div>
  </div>

</body>
</html>

CSS

Comments 0

…

Animated Glowing Neon Sign Effect with HTML and CSS

Recommended

Comments 0