The checked state looks physically raised off the surface. A sphere-like radial gradient (light violet → deep purple) combined with six layered box-shadows (rim highlight, outer glow, ground lift shadow, inner top shine, inner bottom depth) creates a convincing 3D embossed button. The box also lifts 1px on the Y axis. Flat and recessed when unchecked.
Goal: Create a "Raised" checkbox where the checked state looks like a physically raised 3D button.
Visual behavior: A 28×28px checkbox. Unchecked: flat dark (#111114) with a faint border and a subtle inset shadow (recessed look). Checked: a sphere-like radial gradient from light violet (#a78bfa at top-left) through vivid purple (#7c3aed) to deep purple (#4c1d95) at the edges. Six layered box-shadows create the 3D illusion: a rim highlight (top-left light source), an outer purple glow ring, a ground shadow (lifts it off the surface), a second close shadow, an inset top shine, and an inset bottom depth shadow. The box also translateY(-1px) to physically lift. The check mark springs in with a drop-shadow for depth.
Technique: React useState. All 3D achieved via box-shadow layers and radial-gradient on background — no 3D CSS transforms. The check SVG uses filter: drop-shadow for depth. No library dependencies.
Accessibility: Hidden native <input type="checkbox">. 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.