Glow
No library Beginner
On focus the border lights up and a soft halo radiates outward via box-shadow. Pure CSS transitions, no dependencies.
On focus the border lights up and a soft halo radiates outward via box-shadow. Pure CSS transitions, no dependencies.
Goal: Create a "Glow" input focus animation.
Visual behavior: A standard rounded input field. On focus: the border color shifts to an accent color and a double-layered box-shadow appears — a tight ring close to the border (opacity ~0.2) plus a broader diffuse glow (opacity ~0.15). On blur: both fade back to zero smoothly.
Technique:
- Single input element; no wrappers needed
- border: 1px solid — transitions color on focus
- box-shadow: "0 0 0 3px rgba(color, 0.2), 0 0 20px rgba(color, 0.15)" on focus; "0 0 0 0 transparent" at rest
- transition: border-color 200ms ease, box-shadow 250ms ease
Accessibility: The border-color change alone is a sufficient focus indicator. Under prefers-reduced-motion, remove box-shadow transition but keep the border-color change.
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.