Glow effect
Neon glow on hover using layered box-shadow and text-shadow — pure CSS, no filters.
Quick implementation
.glow-card {
padding: 2rem;
border-radius: 1rem;
border: 1px solid oklch(0.3 0.02 260);
background: oklch(0.19 0.02 260);
transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.glow-card:hover,
.glow-card:focus-visible {
border-color: oklch(0.72 0.19 265);
box-shadow:
0 0 10px oklch(0.72 0.19 265 / 0.4),
0 0 30px oklch(0.72 0.19 265 / 0.2),
0 0 60px oklch(0.72 0.19 265 / 0.1);
}
/* Optional: glow on text too */
.glow-card:hover .glow-title {
text-shadow: 0 0 12px oklch(0.72 0.19 265 / 0.6);
}
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
.glow-card { transition: none; }
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building interactive UI effects.
Goal: A neon/glow hover effect on cards and buttons using layered box-shadow — no JavaScript, no CSS filters.
Technical constraints:
- Use three layered box-shadow values at increasing blur radii (10px, 30px, 60px) with decreasing opacity.
- Use oklch() with alpha channel for glow colors — e.g. oklch(0.72 0.19 265 / 0.4).
- Transition box-shadow and border-color with 0.35s ease for a smooth ramp.
- Add matching text-shadow on hover for inner text to reinforce the glow.
- Include :focus-visible so the glow triggers on keyboard focus too.
- Wrap transitions in @media (prefers-reduced-motion: reduce) to disable for motion-sensitive users.
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept glowColor (oklch string), children, and an optional intensity prop (low | medium | high).
Edge cases to handle:
- Multiple glow elements close together should not create an oversaturated combined glow.
- Dark backgrounds are essential — glow is invisible on light backgrounds.
- Ensure the glow does not increase the element's layout size (box-shadow is paint-only).
- Screen readers should not be affected — glow is purely decorative.
Return HTML + CSS.Why this matters in 2026
Glow effects used to require CSS filter: drop-shadow() or JavaScript-based canvas rendering — both expensive and hard to animate smoothly. Layered box-shadow with oklch() alpha channels gives you perceptually uniform glow colors that transition cleanly on the GPU. It's the go-to technique for dark-mode UIs, gaming dashboards, and any interface that needs a premium, glowing feel.
The logic
The glow is built from three concentric box-shadows at different blur radii: 10px (tight core), 30px (mid glow), and 60px (ambient halo). Each layer uses decreasing oklch() alpha — 0.4, 0.2, 0.1 — to create a natural falloff. The border-color also shifts to the glow color on hover, anchoring the glow to the element's edge. A matching text-shadow on inner text reinforces the neon look. The entire effect transitions over 0.35s, and box-shadow is a paint-only property, so it never triggers layout recalculation.
Accessibility & performance
Glow effects are purely decorative and invisible to screen readers. The key accessibility concern is motion sensitivity — the @media (prefers-reduced-motion: reduce) query disables the transition so the glow appears instantly rather than animating. Performance is excellent because box-shadow animates on the compositor thread in modern browsers. Avoid using filter: blur() for the same effect — it forces rasterization of the entire element subtree, which is significantly more expensive.