12 CSS Neon Designs12 / 12

Pure CSSMIT licensed

Rainbow Neon Text

Five distinct CSS rainbow text techniques stacked side-by-side — hue-rotate gradient spin, sliding background-position, per-letter HSL stagger, outline-only stroke, and a pure text-shadow cycle with no gradient-clip at all. (1) `SPECTRUM` uses `filter: hue-rotate(0→360deg)` on a gradient-clipped text — the whole rainbow spins without layout thrashing. (2) `CHROMATIC` uses `background-position: 0→300%` slide on a 300%-wide rainbow gradient — the gradient itself moves across the letters. (3) `RAINBOW` uses per-letter `--h` CSS variable with `hsl(var(--h), 100%, 65%)` and staggered animation-delay — each character occupies its own hue band of the spectrum. (4) `VOLTAGE` is an outline-only version using `-webkit-text-stroke: 2px transparent` with the gradient clipped to the stroke instead of the fill. (5) `◈ PURE GLOW ◈` uses zero gradient-clip — just a 6-keyframe text-shadow cycle hitting hard colour stops (red→orange→yellow→green→blue→violet). Plus two ambient hue-rotating blobs in the corners. Dela Gothic One + Righteous + Teko. Best for hero animations, music/festival branding, gaming title cards, pride-themed surfaces.

Published

Live Demo
Try it

The code

<section class="nn-rnb" aria-label="Rainbow neon text demo">
  <div class="ambient ambient-1" aria-hidden="true"></div>
  <div class="ambient ambient-2" aria-hidden="true"></div>

  <div class="stage">
    <div class="rainbow-hue">SPECTRUM</div>
    <div class="rainbow-slide">CHROMATIC</div>
    <div class="rainbow-letters" aria-label="RAINBOW">
      <span class="rl" style="--i:0">R</span>
      <span class="rl" style="--i:1">A</span>
      <span class="rl" style="--i:2">I</span>
      <span class="rl" style="--i:3">N</span>
      <span class="rl" style="--i:4">B</span>
      <span class="rl" style="--i:5">O</span>
      <span class="rl" style="--i:6">W</span>
    </div>
    <div class="rainbow-outline">VOLTAGE</div>
    <div class="rainbow-shadow">◈ PURE GLOW ◈</div>
  </div>
</section>
/* ─── 12 Rainbow Neon Text — five gradient-cycling techniques ──── */

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Righteous&family=Teko:wght@700&display=swap');

.nn-rnb {
  position: relative;
  width: 100%;
  min-height: 780px;
  background: #040410;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nn-rnb *,
.nn-rnb *::before,
.nn-rnb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Vignette — was body::after fixed; scoped. */

.nn-rnb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(4,4,16,0.7) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Ambient hue-rotating blobs */

.nn-rnb .ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: nn-rnb-ambient 8s linear infinite;
}

.nn-rnb .ambient-1 {
  width: 400px;
  height: 300px;
  top: -80px;
  left: -80px;
  background: rgba(255,0,128,0.06);
}

.nn-rnb .ambient-2 {
  width: 350px;
  height: 250px;
  bottom: -60px;
  right: -60px;
  background: rgba(0,200,255,0.06);
  animation-delay: 4s;
}

@keyframes nn-rnb-ambient {
  from {
    filter: blur(90px) hue-rotate(0deg);
  }

  to {
    filter: blur(90px) hue-rotate(360deg);
  }
}

.nn-rnb .stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 50px 60px;
}
/* 1 — hue-rotate cycle */

.nn-rnb .rainbow-hue {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 88px;
  letter-spacing: 0.04em;
  line-height: 1;
  background: linear-gradient(90deg,
      #ff0080, #ff4500, #ffcc00,
      #00ff94, #00ccff, #8b00ff, #ff0080
    );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nn-rnb-hue 4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255,0,128,0.7)) drop-shadow(0 0 20px rgba(255,0,128,0.4));
}

@keyframes nn-rnb-hue {
  from {
    filter: hue-rotate(0deg) drop-shadow(0 0 10px rgba(255,0,128,0.8)) drop-shadow(0 0 26px rgba(255,0,128,0.4));
  }

  to {
    filter: hue-rotate(360deg) drop-shadow(0 0 10px rgba(0,200,255,0.8)) drop-shadow(0 0 26px rgba(0,200,255,0.4));
  }
}
/* 2 — sliding gradient */

.nn-rnb .rainbow-slide {
  font-family: 'Righteous', cursive;
  font-size: 60px;
  letter-spacing: 0.12em;
  line-height: 1;
  background: linear-gradient(90deg,
      #ff0080 0%,
      #ff4500 12%,
      #ffcc00 25%,
      #00ff94 38%,
      #00ccff 50%,
      #8b00ff 62%,
      #ff0080 75%,
      #ff4500 88%,
      #ffcc00 100%
    );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nn-rnb-slide 3.5s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,100,0,0.6));
}

@keyframes nn-rnb-slide {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 300% center;
  }
}
/* 3 — per-letter stagger + hue */

.nn-rnb .rainbow-letters {
  display: flex;
  gap: 2px;
  font-family: 'Teko', sans-serif;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.nn-rnb .rl {
  display: inline-block;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, hsl(var(--h), 100%, 65%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 6px hsl(var(--h), 100%, 60%)) drop-shadow(0 0 18px hsl(var(--h), 100%, 50%));
  animation: nn-rnb-letter 2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.12s);
  --h: calc(var(--i) * 28);
}

@keyframes nn-rnb-letter {
  from {
    filter: drop-shadow(0 0 4px hsl(var(--h),100%,60%)) drop-shadow(0 0 12px hsl(var(--h),100%,50%));
  }

  to {
    filter: drop-shadow(0 0 8px hsl(var(--h),100%,70%)) drop-shadow(0 0 26px hsl(var(--h),100%,55%)) drop-shadow(0 0 50px hsl(var(--h),100%,40%));
  }
}
/* 4 — outline only */

.nn-rnb .rainbow-outline {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 56px;
  letter-spacing: 0.08em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px transparent;
  background: linear-gradient(90deg,
      #ff0080, #ff4500, #ffcc00,
      #00ff94, #00ccff, #8b00ff, #ff0080
    );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: nn-rnb-slide 5s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255,0,128,0.5)) drop-shadow(0 0 12px rgba(0,200,255,0.4));
}
/* 5 — text-shadow-only cycle */

.nn-rnb .rainbow-shadow {
  font-family: 'Righteous', cursive;
  font-size: 40px;
  letter-spacing: 0.28em;
  color: #fff;
  animation: nn-rnb-shadow 6s linear infinite;
}

@keyframes nn-rnb-shadow {
  0% {
    text-shadow: 0 0 4px #fff, 0 0 12px #ff0080, 0 0 28px #ff0080, 0 0 56px rgba(255,0,128,0.5);
  }

  16% {
    text-shadow: 0 0 4px #fff, 0 0 12px #ff6600, 0 0 28px #ff6600, 0 0 56px rgba(255,102,0,0.5);
  }

  33% {
    text-shadow: 0 0 4px #fff, 0 0 12px #ffcc00, 0 0 28px #ffcc00, 0 0 56px rgba(255,204,0,0.5);
  }

  50% {
    text-shadow: 0 0 4px #fff, 0 0 12px #00ff94, 0 0 28px #00ff94, 0 0 56px rgba(0,255,148,0.5);
  }

  66% {
    text-shadow: 0 0 4px #fff, 0 0 12px #00ccff, 0 0 28px #00ccff, 0 0 56px rgba(0,204,255,0.5);
  }

  83% {
    text-shadow: 0 0 4px #fff, 0 0 12px #8b00ff, 0 0 28px #8b00ff, 0 0 56px rgba(139,0,255,0.5);
  }

  100% {
    text-shadow: 0 0 4px #fff, 0 0 12px #ff0080, 0 0 28px #ff0080, 0 0 56px rgba(255,0,128,0.5);
  }
}

@media (max-width: 640px) {
  .nn-rnb .rainbow-hue {
    font-size: 56px;
  }

  .nn-rnb .rainbow-slide {
    font-size: 40px;
  }

  .nn-rnb .rainbow-letters {
    font-size: 46px;
  }

  .nn-rnb .rainbow-outline {
    font-size: 36px;
  }

  .nn-rnb .rainbow-shadow {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nn-rnb .rainbow-hue,
    .nn-rnb .rainbow-slide,
    .nn-rnb .rl,
    .nn-rnb .rainbow-outline,
    .nn-rnb .rainbow-shadow,
    .nn-rnb .ambient {
    animation: none !important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Neon Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Rainbow Neon Text
Source: https://codefronts.com/design-styles/css-neon/rainbow-neon-text/

Five distinct CSS rainbow text techniques stacked side-by-side — hue-rotate gradient spin, sliding background-position, per-letter HSL stagger, outline-only stroke, and a pure text-shadow cycle with no gradient-clip at all. (1) `SPECTRUM` uses `filter: hue-rotate(0→360deg)` on a gradient-clipped text — the whole rainbow spins without layout thrashing. (2) `CHROMATIC` uses `background-position: 0→300%` slide on a 300%-wide rainbow gradient — the gradient itself moves across the letters. (3) `RAINBOW` uses per-letter `--h` CSS variable with `hsl(var(--h), 100%, 65%)` and staggered animation-delay — each character occupies its own hue band of the spectrum. (4) `VOLTAGE` is an outline-only version using `-webkit-text-stroke: 2px transparent` with the gradient clipped to the stroke instead of the fill. (5) `◈ PURE GLOW ◈` uses zero gradient-clip — just a 6-keyframe text-shadow cycle hitting hard colour stops (red→orange→yellow→green→blue→violet). Plus two ambient hue-rotating blobs in the corners. Dela Gothic One + Righteous + Teko. Best for hero animations, music/festival branding, gaming title cards, pride-themed surfaces.
## HTML
```html
<section class="nn-rnb" aria-label="Rainbow neon text demo">
  <div class="ambient ambient-1" aria-hidden="true"></div>
  <div class="ambient ambient-2" aria-hidden="true"></div>

  <div class="stage">
    <div class="rainbow-hue">SPECTRUM</div>
    <div class="rainbow-slide">CHROMATIC</div>
    <div class="rainbow-letters" aria-label="RAINBOW">
      <span class="rl" style="--i:0">R</span>
      <span class="rl" style="--i:1">A</span>
      <span class="rl" style="--i:2">I</span>
      <span class="rl" style="--i:3">N</span>
      <span class="rl" style="--i:4">B</span>
      <span class="rl" style="--i:5">O</span>
      <span class="rl" style="--i:6">W</span>
    </div>
    <div class="rainbow-outline">VOLTAGE</div>
    <div class="rainbow-shadow">◈ PURE GLOW ◈</div>
  </div>
</section>
```
## CSS
```css
/* ─── 12 Rainbow Neon Text — five gradient-cycling techniques ──── */

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Righteous&family=Teko:wght@700&display=swap');

.nn-rnb {
  position: relative;
  width: 100%;
  min-height: 780px;
  background: #040410;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nn-rnb *,
.nn-rnb *::before,
.nn-rnb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Vignette — was body::after fixed; scoped. */

.nn-rnb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(4,4,16,0.7) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Ambient hue-rotating blobs */

.nn-rnb .ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: nn-rnb-ambient 8s linear infinite;
}

.nn-rnb .ambient-1 {
  width: 400px;
  height: 300px;
  top: -80px;
  left: -80px;
  background: rgba(255,0,128,0.06);
}

.nn-rnb .ambient-2 {
  width: 350px;
  height: 250px;
  bottom: -60px;
  right: -60px;
  background: rgba(0,200,255,0.06);
  animation-delay: 4s;
}

@keyframes nn-rnb-ambient {
  from {
    filter: blur(90px) hue-rotate(0deg);
  }

  to {
    filter: blur(90px) hue-rotate(360deg);
  }
}

.nn-rnb .stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 50px 60px;
}
/* 1 — hue-rotate cycle */

.nn-rnb .rainbow-hue {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 88px;
  letter-spacing: 0.04em;
  line-height: 1;
  background: linear-gradient(90deg,
      #ff0080, #ff4500, #ffcc00,
      #00ff94, #00ccff, #8b00ff, #ff0080
    );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nn-rnb-hue 4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255,0,128,0.7)) drop-shadow(0 0 20px rgba(255,0,128,0.4));
}

@keyframes nn-rnb-hue {
  from {
    filter: hue-rotate(0deg) drop-shadow(0 0 10px rgba(255,0,128,0.8)) drop-shadow(0 0 26px rgba(255,0,128,0.4));
  }

  to {
    filter: hue-rotate(360deg) drop-shadow(0 0 10px rgba(0,200,255,0.8)) drop-shadow(0 0 26px rgba(0,200,255,0.4));
  }
}
/* 2 — sliding gradient */

.nn-rnb .rainbow-slide {
  font-family: 'Righteous', cursive;
  font-size: 60px;
  letter-spacing: 0.12em;
  line-height: 1;
  background: linear-gradient(90deg,
      #ff0080 0%,
      #ff4500 12%,
      #ffcc00 25%,
      #00ff94 38%,
      #00ccff 50%,
      #8b00ff 62%,
      #ff0080 75%,
      #ff4500 88%,
      #ffcc00 100%
    );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nn-rnb-slide 3.5s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,100,0,0.6));
}

@keyframes nn-rnb-slide {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 300% center;
  }
}
/* 3 — per-letter stagger + hue */

.nn-rnb .rainbow-letters {
  display: flex;
  gap: 2px;
  font-family: 'Teko', sans-serif;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.nn-rnb .rl {
  display: inline-block;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, hsl(var(--h), 100%, 65%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 6px hsl(var(--h), 100%, 60%)) drop-shadow(0 0 18px hsl(var(--h), 100%, 50%));
  animation: nn-rnb-letter 2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.12s);
  --h: calc(var(--i) * 28);
}

@keyframes nn-rnb-letter {
  from {
    filter: drop-shadow(0 0 4px hsl(var(--h),100%,60%)) drop-shadow(0 0 12px hsl(var(--h),100%,50%));
  }

  to {
    filter: drop-shadow(0 0 8px hsl(var(--h),100%,70%)) drop-shadow(0 0 26px hsl(var(--h),100%,55%)) drop-shadow(0 0 50px hsl(var(--h),100%,40%));
  }
}
/* 4 — outline only */

.nn-rnb .rainbow-outline {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 56px;
  letter-spacing: 0.08em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px transparent;
  background: linear-gradient(90deg,
      #ff0080, #ff4500, #ffcc00,
      #00ff94, #00ccff, #8b00ff, #ff0080
    );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: nn-rnb-slide 5s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255,0,128,0.5)) drop-shadow(0 0 12px rgba(0,200,255,0.4));
}
/* 5 — text-shadow-only cycle */

.nn-rnb .rainbow-shadow {
  font-family: 'Righteous', cursive;
  font-size: 40px;
  letter-spacing: 0.28em;
  color: #fff;
  animation: nn-rnb-shadow 6s linear infinite;
}

@keyframes nn-rnb-shadow {
  0% {
    text-shadow: 0 0 4px #fff, 0 0 12px #ff0080, 0 0 28px #ff0080, 0 0 56px rgba(255,0,128,0.5);
  }

  16% {
    text-shadow: 0 0 4px #fff, 0 0 12px #ff6600, 0 0 28px #ff6600, 0 0 56px rgba(255,102,0,0.5);
  }

  33% {
    text-shadow: 0 0 4px #fff, 0 0 12px #ffcc00, 0 0 28px #ffcc00, 0 0 56px rgba(255,204,0,0.5);
  }

  50% {
    text-shadow: 0 0 4px #fff, 0 0 12px #00ff94, 0 0 28px #00ff94, 0 0 56px rgba(0,255,148,0.5);
  }

  66% {
    text-shadow: 0 0 4px #fff, 0 0 12px #00ccff, 0 0 28px #00ccff, 0 0 56px rgba(0,204,255,0.5);
  }

  83% {
    text-shadow: 0 0 4px #fff, 0 0 12px #8b00ff, 0 0 28px #8b00ff, 0 0 56px rgba(139,0,255,0.5);
  }

  100% {
    text-shadow: 0 0 4px #fff, 0 0 12px #ff0080, 0 0 28px #ff0080, 0 0 56px rgba(255,0,128,0.5);
  }
}

@media (max-width: 640px) {
  .nn-rnb .rainbow-hue {
    font-size: 56px;
  }

  .nn-rnb .rainbow-slide {
    font-size: 40px;
  }

  .nn-rnb .rainbow-letters {
    font-size: 46px;
  }

  .nn-rnb .rainbow-outline {
    font-size: 36px;
  }

  .nn-rnb .rainbow-shadow {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nn-rnb .rainbow-hue,
    .nn-rnb .rainbow-slide,
    .nn-rnb .rl,
    .nn-rnb .rainbow-outline,
    .nn-rnb .rainbow-shadow,
    .nn-rnb .ambient {
    animation: none !important;
  }
}
```

Techniques used in this demo

background-clip: textMDN ↗filterMDN ↗radial-gradient()MDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →