Read the full writeup at https://seangeng.com/writing/a-neumorphic-toggle.md and implement it in my project.
It covers: A neumorphic toggle from two inset shadows. Recreating a soft, pressed-in segmented toggle from a Sketch recipe: a gradient pill, two opposing inset shadows for the depth, and a raised thumb that slides between sun and moon. Pure CSS.
Requirements:
- Follow the technique/approach exactly as described in the writeup.
- Adapt names, colors, and styling to my project's existing conventions.
- If it's a component, make it reusable with sensible props and TypeScript types.
- Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion.
- When done, tell me which files you created or changed and how to use it.
I came across a five-step Sketch recipe for one of those soft, pillowy toggles
and wanted to see how little CSS it'd take to make a real, working one. Turns
out: not much. The whole soft look is a gradient and two inset shadows.
Two shadows pointing opposite ways
Start with a pill (border-radius big enough to round the ends) and a
left-to-right gradient, light on one side, dark on the other:
Then the trick. Add two inset shadows that point in opposite directions, one
dark and one light:
box-shadow: inset 20px 0 30px -10px #171717, /* dark, pressing in from the left */ inset -20px 0 30px -10px #494949; /* light, pressing in from the right */
That's the entire neumorphic effect. The opposing soft shadows make the surface
look like it was pressed out of one piece of material, not drawn with a border
and a fill. No outline anywhere, and it still reads as a distinct, sunken shape.
Give it a thumb that moves
The static recipe stops there. A toggle needs to do something, so I added a
raised knob that slides between the two halves:
The knob gets its own drop shadow and a one-pixel top highlight so it reads as
raised against the sunken track. A data-index on the wrapper drives the slide,
and a springy ease keeps it from feeling sluggish. The icons sit on top, so the
one over the thumb is bright and the other dims back.
Under the hood it's a real radiogroup with two radio buttons, so it's
keyboard- and screen-reader-friendly, and the motion sits behind
prefers-reduced-motion. The look is the fun part, but a toggle nobody can
operate isn't worth shipping.
Grab the component (sun/moon or your own two options) on the
Neumorphic Toggle page.