33 Tailwind CSS Card Hover Effects
13 / 33
All 33 in 33 Tailwind CSS Card Hover Effects
- 01Tailwind 3D Tilt & Parallax Card with Depth Layers
- 02Tailwind Glowing Gradient & Glassmorphic Border Card
- 03Tailwind Image Zoom Card with Slide-Up Content Reveal
- 04Tailwind 3D Flip Card (Front to Back) with backface-visibility
- 05Tailwind Sibling De-emphasis Pricing Grid with has-hover
- 06Tailwind Minimalist Elevation Card with Layered Dynamic Shadows
- 07Tailwind Elastic Lift Card with Spring Cubic-Bezier
- 08Tailwind Animated Conic Gradient Border Card with @property
- 09Tailwind Stacked Layer Reveal Card (Fanned Risograph Deck)
- 10Tailwind Holographic Foil Shimmer Card with mix-blend-mode
- 11Tailwind Curtain Reveal Card (Parting Velvet Halves)
- 12Tailwind Corner Peel Card with clip-path Triangles
- 13Tailwind Neon Sign Card with Layered Text-Shadow Glow
- 14Tailwind CRT Scanline Terminal Card with Sweeping Beam
- 15Tailwind Depth Parallax Landscape Card with Layer Multipliers
- 16Tailwind Cursor Spotlight Card with Masked Border Highlight
- 17Tailwind 3D Tilt Product Card with Specular Glare
- 18Tailwind Slide-Up Panel Card with Peek Header Swap
- 19Tailwind Credit Card Flip with Magnetic Strip & CVV
- 20Tailwind RGB Channel-Split Glitch Card
- 21Tailwind Rotating Conic Aura Card with Blurred Gradient Bloom
- 22Tailwind Blob-to-Rectangle Border Morph Card
- 23Tailwind Magnetic Float Orb Card with Pointer Attraction
- 24Tailwind Typewriter Reveal Card with Steps Animation & Caret
- 25Tailwind Magazine Overlay Slide Card (Full-Face Panel Takeover)
- 26Tailwind Breathing Film Grain Card with SVG Turbulence Noise
- 27Tailwind Frosted Glass Intensify Card with Deepening Backdrop Blur
- 28Tailwind Blueprint Reveal Card with Circular clip-path Wipe
- 29Tailwind Cursor-Anchored Shockwave Ripple Card
- 30Tailwind Color-Burn Ignition Card with Grayscale-to-Fire Hover
- 31Tailwind Prismatic Light Sweep Card with Screen Blend Bar
- 32Tailwind Book Cover Open Card with Hinged 3D Rotation
- 33Tailwind Drifting Aurora Ribbons Card with Blurred Gradient Bands
Tailwind Neon Sign Card with Layered Text-Shadow Glow
A dim brick-wall bar card whose sign ignites into flickering neon on hover. Tailwind has no text-shadow colour scale worth using for four-layer tube glow, so the stacks become --text-shadow-* @theme entries — and the flicker stays a keyframe, exposed back as animate-tch13-flicker.
Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time
Untitled UI React · Affiliate link
The code
<section class="tch-13 w-full min-h-svh grid place-items-center bg-[radial-gradient(circle_at_50%_120%,#1a1430_0%,#050308_70%)] font-tch13-sans p-8">
<article tabindex="0" class="group relative w-[330px] h-[430px] rounded-2xl overflow-hidden cursor-pointer outline-none bg-tch13-card border-2 border-white/4 transition-shadow duration-500 hover:shadow-[0_0_50px_rgb(255_45_149/0.25)] focus-visible:shadow-[0_0_50px_rgb(255_45_149/0.25)] focus-visible:outline-3 focus-visible:outline-tch13-cyan focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:opacity-70 before:bg-[linear-gradient(rgb(10_7_18/0.85),rgb(10_7_18/0.92)),repeating-linear-gradient(0deg,#181020_0_24px,transparent_24px_26px),repeating-linear-gradient(90deg,#181020_0_48px,transparent_48px_50px)]">
<div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between items-center text-center">
<span class="font-tch13-mono text-[0.85rem] tracking-[0.3em] text-tch13-cyan opacity-40 transition-[opacity,text-shadow] duration-400 group-hover:opacity-100 group-hover:text-shadow-tch13-cyan group-focus-visible:opacity-100 group-focus-visible:text-shadow-tch13-cyan">— open till late —</span>
<h2 class="font-tch13-display text-[3.4rem] leading-[0.95] text-tch13-dead transition-[color,text-shadow] duration-500 group-hover:text-tch13-pink group-hover:text-shadow-tch13-pink group-hover:animate-tch13-flicker group-focus-visible:text-tch13-pink group-focus-visible:text-shadow-tch13-pink motion-reduce:group-hover:animate-none">Lola's</h2>
<p class="font-tch13-mono text-[1.1rem] text-tch13-dead transition-[color,text-shadow] duration-500 delay-100 group-hover:text-tch13-cyan group-hover:text-shadow-tch13-cyan group-focus-visible:text-tch13-cyan group-focus-visible:text-shadow-tch13-cyan">cocktail bar</p>
<p class="text-[0.85rem] leading-[1.6] text-tch13-body max-w-[90%]">Hover to light the sign. Hand-bent tubes, mezcal flights, and a back room you have to ask about.</p>
</div>
</article>
</section><section class="tch-13 w-full min-h-svh grid place-items-center bg-[radial-gradient(circle_at_50%_120%,#1a1430_0%,#050308_70%)] font-tch13-sans p-8">
<article tabindex="0" class="group relative w-[330px] h-[430px] rounded-2xl overflow-hidden cursor-pointer outline-none bg-tch13-card border-2 border-white/4 transition-shadow duration-500 hover:shadow-[0_0_50px_rgb(255_45_149/0.25)] focus-visible:shadow-[0_0_50px_rgb(255_45_149/0.25)] focus-visible:outline-3 focus-visible:outline-tch13-cyan focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:opacity-70 before:bg-[linear-gradient(rgb(10_7_18/0.85),rgb(10_7_18/0.92)),repeating-linear-gradient(0deg,#181020_0_24px,transparent_24px_26px),repeating-linear-gradient(90deg,#181020_0_48px,transparent_48px_50px)]">
<div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between items-center text-center">
<span class="font-tch13-mono text-[0.85rem] tracking-[0.3em] text-tch13-cyan opacity-40 transition-[opacity,text-shadow] duration-400 group-hover:opacity-100 group-hover:text-shadow-tch13-cyan group-focus-visible:opacity-100 group-focus-visible:text-shadow-tch13-cyan">— open till late —</span>
<h2 class="font-tch13-display text-[3.4rem] leading-[0.95] text-tch13-dead transition-[color,text-shadow] duration-500 group-hover:text-tch13-pink group-hover:text-shadow-tch13-pink group-hover:animate-tch13-flicker group-focus-visible:text-tch13-pink group-focus-visible:text-shadow-tch13-pink motion-reduce:group-hover:animate-none">Lola's</h2>
<p class="font-tch13-mono text-[1.1rem] text-tch13-dead transition-[color,text-shadow] duration-500 delay-100 group-hover:text-tch13-cyan group-hover:text-shadow-tch13-cyan group-focus-visible:text-tch13-cyan group-focus-visible:text-shadow-tch13-cyan">cocktail bar</p>
<p class="text-[0.85rem] leading-[1.6] text-tch13-body max-w-[90%]">Hover to light the sign. Hand-bent tubes, mezcal flights, and a back room you have to ask about.</p>
</div>
</article>
</section>@import "tailwindcss";
@keyframes tch13-flicker {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
opacity: 1;
}
20%,
24%,
55% {
opacity: 0.65;
text-shadow: none;
}
}
@theme {
--color-tch13-card: #0a0712;
--color-tch13-card: oklch(0.12 0.02 295);
--color-tch13-dead: #2a1a35;
--color-tch13-dead: oklch(0.25 0.04 305);
--color-tch13-body: #8a7a9a;
--color-tch13-body: oklch(0.6 0.04 300);
--color-tch13-pink: #ff2d95;
--color-tch13-pink: oklch(0.67 0.26 355);
--color-tch13-cyan: #29f5ff;
--color-tch13-cyan: oklch(0.89 0.14 200);
--font-tch13-sans: 'Oxanium', system-ui, sans-serif;
--font-tch13-mono: 'Major Mono Display', ui-monospace, monospace;
--font-tch13-display: 'Monoton', cursive;
--text-shadow-tch13-pink: 0 0 6px #ff2d95, 0 0 14px #ff2d95, 0 0 30px #ff2d95, 0 0 60px #ff2d95;
--text-shadow-tch13-cyan: 0 0 6px #29f5ff, 0 0 16px #29f5ff;
--animate-tch13-flicker: tch13-flicker 3s infinite;
}
.tch-13 {
width: 100%;
min-height: 100svh;
}@import "tailwindcss";
@keyframes tch13-flicker {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
opacity: 1;
}
20%,
24%,
55% {
opacity: 0.65;
text-shadow: none;
}
}
@theme {
--color-tch13-card: #0a0712;
--color-tch13-card: oklch(0.12 0.02 295);
--color-tch13-dead: #2a1a35;
--color-tch13-dead: oklch(0.25 0.04 305);
--color-tch13-body: #8a7a9a;
--color-tch13-body: oklch(0.6 0.04 300);
--color-tch13-pink: #ff2d95;
--color-tch13-pink: oklch(0.67 0.26 355);
--color-tch13-cyan: #29f5ff;
--color-tch13-cyan: oklch(0.89 0.14 200);
--font-tch13-sans: 'Oxanium', system-ui, sans-serif;
--font-tch13-mono: 'Major Mono Display', ui-monospace, monospace;
--font-tch13-display: 'Monoton', cursive;
--text-shadow-tch13-pink: 0 0 6px #ff2d95, 0 0 14px #ff2d95, 0 0 30px #ff2d95, 0 0 60px #ff2d95;
--text-shadow-tch13-cyan: 0 0 6px #29f5ff, 0 0 16px #29f5ff;
--animate-tch13-flicker: tch13-flicker 3s infinite;
}
.tch-13 {
width: 100%;
min-height: 100svh;
}Setup — do this once per project
Skip this if your project already runs Tailwind v4.
1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>Compiles in the browser — perfect for a CodePen or a quick test, not for production.
npm install tailwindcss @tailwindcss/vite
npm install tailwindcss @tailwindcss/vite// vite.config.js ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})// vite.config.js ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})Any v4 setup works — Vite, PostCSS or the CLI. Nothing in this demo is bundler-specific.
2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";
@keyframes tch13-flicker {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
opacity: 1;
}
20%,
24%,
55% {
opacity: 0.65;
text-shadow: none;
}
}
@theme {
--color-tch13-card: #0a0712;
--color-tch13-card: oklch(0.12 0.02 295);
--color-tch13-dead: #2a1a35;
--color-tch13-dead: oklch(0.25 0.04 305);
--color-tch13-body: #8a7a9a;
--color-tch13-body: oklch(0.6 0.04 300);
--color-tch13-pink: #ff2d95;
--color-tch13-pink: oklch(0.67 0.26 355);
--color-tch13-cyan: #29f5ff;
--color-tch13-cyan: oklch(0.89 0.14 200);
--font-tch13-sans: 'Oxanium', system-ui, sans-serif;
--font-tch13-mono: 'Major Mono Display', ui-monospace, monospace;
--font-tch13-display: 'Monoton', cursive;
--text-shadow-tch13-pink: 0 0 6px #ff2d95, 0 0 14px #ff2d95, 0 0 30px #ff2d95, 0 0 60px #ff2d95;
--text-shadow-tch13-cyan: 0 0 6px #29f5ff, 0 0 16px #29f5ff;
--animate-tch13-flicker: tch13-flicker 3s infinite;
}
.tch-13 {
width: 100%;
min-height: 100svh;
}@import "tailwindcss";
@keyframes tch13-flicker {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
opacity: 1;
}
20%,
24%,
55% {
opacity: 0.65;
text-shadow: none;
}
}
@theme {
--color-tch13-card: #0a0712;
--color-tch13-card: oklch(0.12 0.02 295);
--color-tch13-dead: #2a1a35;
--color-tch13-dead: oklch(0.25 0.04 305);
--color-tch13-body: #8a7a9a;
--color-tch13-body: oklch(0.6 0.04 300);
--color-tch13-pink: #ff2d95;
--color-tch13-pink: oklch(0.67 0.26 355);
--color-tch13-cyan: #29f5ff;
--color-tch13-cyan: oklch(0.89 0.14 200);
--font-tch13-sans: 'Oxanium', system-ui, sans-serif;
--font-tch13-mono: 'Major Mono Display', ui-monospace, monospace;
--font-tch13-display: 'Monoton', cursive;
--text-shadow-tch13-pink: 0 0 6px #ff2d95, 0 0 14px #ff2d95, 0 0 30px #ff2d95, 0 0 60px #ff2d95;
--text-shadow-tch13-cyan: 0 0 6px #29f5ff, 0 0 16px #29f5ff;
--animate-tch13-flicker: tch13-flicker 3s infinite;
}
.tch-13 {
width: 100%;
min-height: 100svh;
}3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Monoton&family=Major+Mono+Display&family=Oxanium:wght@400;600&display=swap">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Monoton&family=Major+Mono+Display&family=Oxanium:wght@400;600&display=swap">What changed in the port
Which parts became utilities, which stayed CSS, and why.
- v4.1's
--text-shadow-*theme namespace is what makes this demo portable at all — before it, four-layer tube glow meant a 90-character arbitrary value duplicated per state. - The brick wall is three gradients in one
bg-[…]on abefore:. Long, but it replaces a whole stylesheet rule and stays next to the card it textures. - UI change from the CSS original: the card is focusable, the sign lights on
group-focus-visible:, and the flicker keyframe now dims to 0.65 rather than relying on a shadow swap alone.
Here's a working CSS demo 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: Tailwind Neon Sign Card with Layered Text-Shadow Glow
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-neon-sign-card-hover-effect/
A dim brick-wall bar card whose sign ignites into flickering neon on hover. Tailwind has no text-shadow colour scale worth using for four-layer tube glow, so the stacks become --text-shadow-* @theme entries — and the flicker stays a keyframe, exposed back as animate-tch13-flicker.
## HTML
```html
<section class="tch-13 w-full min-h-svh grid place-items-center bg-[radial-gradient(circle_at_50%_120%,#1a1430_0%,#050308_70%)] font-tch13-sans p-8">
<article tabindex="0" class="group relative w-[330px] h-[430px] rounded-2xl overflow-hidden cursor-pointer outline-none bg-tch13-card border-2 border-white/4 transition-shadow duration-500 hover:shadow-[0_0_50px_rgb(255_45_149/0.25)] focus-visible:shadow-[0_0_50px_rgb(255_45_149/0.25)] focus-visible:outline-3 focus-visible:outline-tch13-cyan focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:opacity-70 before:bg-[linear-gradient(rgb(10_7_18/0.85),rgb(10_7_18/0.92)),repeating-linear-gradient(0deg,#181020_0_24px,transparent_24px_26px),repeating-linear-gradient(90deg,#181020_0_48px,transparent_48px_50px)]">
<div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between items-center text-center">
<span class="font-tch13-mono text-[0.85rem] tracking-[0.3em] text-tch13-cyan opacity-40 transition-[opacity,text-shadow] duration-400 group-hover:opacity-100 group-hover:text-shadow-tch13-cyan group-focus-visible:opacity-100 group-focus-visible:text-shadow-tch13-cyan">— open till late —</span>
<h2 class="font-tch13-display text-[3.4rem] leading-[0.95] text-tch13-dead transition-[color,text-shadow] duration-500 group-hover:text-tch13-pink group-hover:text-shadow-tch13-pink group-hover:animate-tch13-flicker group-focus-visible:text-tch13-pink group-focus-visible:text-shadow-tch13-pink motion-reduce:group-hover:animate-none">Lola's</h2>
<p class="font-tch13-mono text-[1.1rem] text-tch13-dead transition-[color,text-shadow] duration-500 delay-100 group-hover:text-tch13-cyan group-hover:text-shadow-tch13-cyan group-focus-visible:text-tch13-cyan group-focus-visible:text-shadow-tch13-cyan">cocktail bar</p>
<p class="text-[0.85rem] leading-[1.6] text-tch13-body max-w-[90%]">Hover to light the sign. Hand-bent tubes, mezcal flights, and a back room you have to ask about.</p>
</div>
</article>
</section>
```
## CSS
```css
@import "tailwindcss";
@keyframes tch13-flicker {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
opacity: 1;
}
20%,
24%,
55% {
opacity: 0.65;
text-shadow: none;
}
}
@theme {
--color-tch13-card: #0a0712;
--color-tch13-card: oklch(0.12 0.02 295);
--color-tch13-dead: #2a1a35;
--color-tch13-dead: oklch(0.25 0.04 305);
--color-tch13-body: #8a7a9a;
--color-tch13-body: oklch(0.6 0.04 300);
--color-tch13-pink: #ff2d95;
--color-tch13-pink: oklch(0.67 0.26 355);
--color-tch13-cyan: #29f5ff;
--color-tch13-cyan: oklch(0.89 0.14 200);
--font-tch13-sans: 'Oxanium', system-ui, sans-serif;
--font-tch13-mono: 'Major Mono Display', ui-monospace, monospace;
--font-tch13-display: 'Monoton', cursive;
--text-shadow-tch13-pink: 0 0 6px #ff2d95, 0 0 14px #ff2d95, 0 0 30px #ff2d95, 0 0 60px #ff2d95;
--text-shadow-tch13-cyan: 0 0 6px #29f5ff, 0 0 16px #29f5ff;
--animate-tch13-flicker: tch13-flicker 3s infinite;
}
.tch-13 {
width: 100%;
min-height: 100svh;
}
```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 demo 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: Tailwind Neon Sign Card with Layered Text-Shadow Glow
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-neon-sign-card-hover-effect/
A dim brick-wall bar card whose sign ignites into flickering neon on hover. Tailwind has no text-shadow colour scale worth using for four-layer tube glow, so the stacks become --text-shadow-* @theme entries — and the flicker stays a keyframe, exposed back as animate-tch13-flicker.
## HTML
```html
<section class="tch-13 w-full min-h-svh grid place-items-center bg-[radial-gradient(circle_at_50%_120%,#1a1430_0%,#050308_70%)] font-tch13-sans p-8">
<article tabindex="0" class="group relative w-[330px] h-[430px] rounded-2xl overflow-hidden cursor-pointer outline-none bg-tch13-card border-2 border-white/4 transition-shadow duration-500 hover:shadow-[0_0_50px_rgb(255_45_149/0.25)] focus-visible:shadow-[0_0_50px_rgb(255_45_149/0.25)] focus-visible:outline-3 focus-visible:outline-tch13-cyan focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:opacity-70 before:bg-[linear-gradient(rgb(10_7_18/0.85),rgb(10_7_18/0.92)),repeating-linear-gradient(0deg,#181020_0_24px,transparent_24px_26px),repeating-linear-gradient(90deg,#181020_0_48px,transparent_48px_50px)]">
<div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between items-center text-center">
<span class="font-tch13-mono text-[0.85rem] tracking-[0.3em] text-tch13-cyan opacity-40 transition-[opacity,text-shadow] duration-400 group-hover:opacity-100 group-hover:text-shadow-tch13-cyan group-focus-visible:opacity-100 group-focus-visible:text-shadow-tch13-cyan">— open till late —</span>
<h2 class="font-tch13-display text-[3.4rem] leading-[0.95] text-tch13-dead transition-[color,text-shadow] duration-500 group-hover:text-tch13-pink group-hover:text-shadow-tch13-pink group-hover:animate-tch13-flicker group-focus-visible:text-tch13-pink group-focus-visible:text-shadow-tch13-pink motion-reduce:group-hover:animate-none">Lola's</h2>
<p class="font-tch13-mono text-[1.1rem] text-tch13-dead transition-[color,text-shadow] duration-500 delay-100 group-hover:text-tch13-cyan group-hover:text-shadow-tch13-cyan group-focus-visible:text-tch13-cyan group-focus-visible:text-shadow-tch13-cyan">cocktail bar</p>
<p class="text-[0.85rem] leading-[1.6] text-tch13-body max-w-[90%]">Hover to light the sign. Hand-bent tubes, mezcal flights, and a back room you have to ask about.</p>
</div>
</article>
</section>
```
## CSS
```css
@import "tailwindcss";
@keyframes tch13-flicker {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
opacity: 1;
}
20%,
24%,
55% {
opacity: 0.65;
text-shadow: none;
}
}
@theme {
--color-tch13-card: #0a0712;
--color-tch13-card: oklch(0.12 0.02 295);
--color-tch13-dead: #2a1a35;
--color-tch13-dead: oklch(0.25 0.04 305);
--color-tch13-body: #8a7a9a;
--color-tch13-body: oklch(0.6 0.04 300);
--color-tch13-pink: #ff2d95;
--color-tch13-pink: oklch(0.67 0.26 355);
--color-tch13-cyan: #29f5ff;
--color-tch13-cyan: oklch(0.89 0.14 200);
--font-tch13-sans: 'Oxanium', system-ui, sans-serif;
--font-tch13-mono: 'Major Mono Display', ui-monospace, monospace;
--font-tch13-display: 'Monoton', cursive;
--text-shadow-tch13-pink: 0 0 6px #ff2d95, 0 0 14px #ff2d95, 0 0 30px #ff2d95, 0 0 60px #ff2d95;
--text-shadow-tch13-cyan: 0 0 6px #29f5ff, 0 0 16px #29f5ff;
--animate-tch13-flicker: tch13-flicker 3s infinite;
}
.tch-13 {
width: 100%;
min-height: 100svh;
}
```How this works
Unlit is a colour, lit is a shadow. At rest the sign text is text-tch13-dead — a dull purple-grey that reads as cold glass tube. On hover it takes the neon hue and a four-layer text-shadow at 6px, 14px, 30px and 60px blur. That falloff stack is the whole illusion: one shadow reads as a blur, four read as light.
Shadow stacks are tokens. Written inline they are unreadable arbitrary values repeated per element. As --text-shadow-* @theme entries in v4 they mint utilities, so the pink and cyan tubes are named and editable in one block.
Flicker is a keyframe with uneven stops. The dim frames sit at 18-25% and 53-57% — deliberately irregular, because evenly spaced dimming reads as a pulse, not electrical noise.
Make it yours
- Tube hue:
--color-tch13-pink/--color-tch13-cyan, and the matching shadow tokens. - Glow intensity: drop the 60px layer for a restrained sign, or add a fifth for arcade.
- Delete
animate-tch13-flickerfor a steady tube — some brands want clean, some want broken.
Gotchas — read before shipping
- Flicker must never drop below ~0.6 opacity and must be gated by
motion-reduce:; strobing text is a photosensitivity risk, not a style choice. - Three shadow layers per element is the practical ceiling before compositing cost shows; this demo spends its budget on one headline.
- The glow is decoration — the unlit text colour is what has to meet contrast, since that is the resting state most users see.
- This pattern only works on a dark card. On light backgrounds neon reads as a blurry mistake.
Browser support
| Chrome | Safari | Firefox | Edge |
|---|---|---|---|
| 111+ | 16.4+ | 128+ | 111+ |
text-shadow and keyframes are universally supported; --text-shadow-* theme entries require Tailwind v4.1+, which sets the floor.