Neumorphic
No library Beginner
Outer raised dual-shadow transitions to an inset pressed dual-shadow on focus, making the input appear to sink into the soft surface. Smooth 250ms transition.
Outer raised dual-shadow transitions to an inset pressed dual-shadow on focus, making the input appear to sink into the soft surface. Smooth 250ms transition.
Goal: Create a "Neumorphic" input focus animation.
Visual behavior: The input sits on a matching soft surface (same background color). At rest it appears raised via dual drop shadows (light above-left, dark below-right). On focus: the shadows invert to inset, making the input visually sink into the surface. A subtle color accent outline appears. Smooth 250ms ease transition.
Technique:
- Input background matches a surrounding wrapper panel (same color: e.g. #1e2030 on dark theme)
- At rest: box-shadow: "5px 5px 14px rgba(0,0,0,0.5), -5px -5px 14px rgba(255,255,255,0.04)"
- On focus: box-shadow: "inset 4px 4px 10px rgba(0,0,0,0.5), inset -4px -4px 10px rgba(255,255,255,0.04)"
- Outline: 1px solid rgba(accent,0.3) on focus, transparent at rest
- No border needed; the shadow creates the shape
Accessibility: A visible outline on focus is required as the shadow difference alone may not pass WCAG contrast.
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.