Overview
A soft-UI shadow generator in the classic neumorphism style. It takes a base colour, derives one lighter and one darker companion by shifting each RGB channel, and builds a dual box-shadow that simulates a single light source. Four shapes change the physics: flat, concave, convex and pressed, the last one using inset shadows so the element looks pushed into the surface.
How It Works
Pick a base colour with the picker; the Light and Dark chips show the exact companion hex values the tool computed. Choose one of the four shapes, then drag Distance between 2 and 30 pixels and Blur between 4 and 60 pixels. Four presets named Classic, Dark, Coral and Mint load balanced starting points. The preview renders a 140 by 140 widget with a fixed 24 pixel radius on a matching background, and the output panel builds a .neumorphic class containing the background, the box-shadow and the border-radius.
Step-by-Step Usage Guide
- Choose a base colour, ideally a mid-tone grey or pastel.
- Pick flat, concave, convex or pressed.
- Adjust distance and blur to taste.
- Copy the .neumorphic class from the output panel.
Technical Specifications & Standards
The companion colours come from an absolute per-channel shift: the light shadow adds 40 to each of red, green and blue, the dark one subtracts 40, and each result clamps to the 0 to 255 range before hex encoding. Near-black or near-white base colours therefore saturate and the two shadows converge, which is why mid-tone greys like the Classic preset look best. Concave and convex shapes replace the flat background with a 145 degree linear gradient between the dark and light companions, running dark-to-light for concave and light-to-dark for convex, while pressed swaps the outward shadows for two inset ones that carve the surface. Because both shadows share one offset distance, the implied light source sits at the top-left; mirroring the offsets is how you would flip it. The contrast between element and background is usually far below WCAG thresholds, so neumorphism fits decoration better than it fits primary controls.
Targeted Use Cases
- Soft control panels for dashboards and audio apps.
- Toggle switches and sliders that read as physical hardware.
- Pressed-in well effects for search fields and number pads.
- Cohesive pastel landing pages with a sculpted, tactile look.
Notes & Gotchas
- Use a mid-tone base colour so the light and dark companions stay distinct.
- Pair neumorphic surfaces with strong colour or weight on the actual interactive state, since the low contrast hides affordances.
- Keep distance and blur roughly proportional, around one to two, for a believable light source.
- Give pressed and raised states different shadows so toggling is visible.
Frequently Asked Questions
How are the light and dark shadow colours chosen?
The tool adds or subtracts 40 from each RGB channel of your base colour and clamps to the 0 to 255 range. The exact hex values are shown in the Light and Dark chips next to the picker.
What does the pressed shape do differently?
It switches from outward to inset shadows: a dark inset towards the light source and a light inset away from it. That inversion is what makes the element appear carved into the surface rather than sitting on it.
Why does my very dark or very light colour look flat?
Channel shifts clamp at 0 and 255, so a near-black base cannot get a darker shadow and a near-white one cannot get a lighter highlight. Both shadows collapse toward the same tone and the effect disappears.
Is the border radius configurable?
The generated class fixes border-radius at 24 pixels and the preview widget uses it too. Change the value after pasting; the shadow math does not depend on the radius.