A dark neumorphic toggle with a recessed track and physically-raised knob created entirely from layered box-shadows. Off: dark extruded knob on dark track. On: indigo knob with glow slides right, track gains a purple inner glow.
Goal: Create a "Neumorphic" toggle animation.
Visual behavior: A 60×32px pill toggle on a dark (#1c1c1e) background. The track itself looks recessed with inset box-shadows (dark upper-left, faint light lower-right). An absolutely-positioned 22px knob slides from left to right. Off: the knob is a dark extruded button (light lower-right shadow to create elevation). On: the knob becomes an indigo gradient with a purple glow, the track gains a subtle indigo inner light, and the outer ring picks up an indigo ring. Everything is achieved with box-shadow layers — no external assets.
Technique: React useState. All visual states driven by inline style transitions on left (spring cubic-bezier), background, and box-shadow. No keyframes needed. No library dependencies.
Accessibility: role="switch" + aria-checked. Transitions skipped under prefers-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.