12 CSS Neon Designs 12 / 12
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.
Best forhero animations, music/festival branding, gaming title cards, pride-themed surfaces.
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> <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; }
} /* ─── 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; }
}