Neon Glow
No library Beginner
On hover the card border lights up in amber-orange and a layered box-shadow creates a vivid neon halo effect. Pure CSS transitions, no dependencies.
On hover the card border lights up in amber-orange and a layered box-shadow creates a vivid neon halo effect. Pure CSS transitions, no dependencies.
Goal: Create a "Neon Glow" card animation.
Visual behavior: On hover the card's border transitions from a subtle white/10 tint to an amber-orange tint. Simultaneously, a layered box-shadow creates a vivid neon halo: inner glow (~18px at ~50% opacity), wide diffuse glow (~40px at ~18% opacity), plus a deep shadow. The card also lifts 4px. All transitions take ~300ms.
Technique: React useState tracks hover. Inline styles swap box-shadow, border-color, and translateY between hovered/resting values. A single CSS transition property covers all three.
Accessibility: Wrap transition in motion-safe or check prefers-reduced-motion. Remove transform and box-shadow transitions under reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.