CSS Neumorphism Generator
Soft-UI extruded, pressed or flat panels derived from one base colour -- with shape, light angle, intensity, colour overrides, optional icon/text content, presets, randomize, and export to CSS, Tailwind, SCSS or React.
What this tool does
Builds a neumorphic "soft-UI" panel — the look where an element appears carved from or pressed into the same surface it sits on — from a single base colour, deriving the light and dark shadow shades automatically rather than needing them picked by hand.
Convex, concave and flat
Convex raises the panel above the surface with an outer light/ dark shadow pair; concave presses it in with the same shadows made inset; flat keeps a subtler version of the same effect with less blur and offset. Box, circle, and pill shapes are all supported.
Deriving shadows from one colour
The light and dark shadow colours are computed by lightening and darkening the base colour by a fixed amount — the technique that makes neumorphism look cohesive rather than like an arbitrary shadow slapped on top. An override lets both shadow colours be set directly instead when the automatic derivation isn't quite right.
Light angle, distance, blur and intensity
The light angle determines which direction the light and dark shadows fall, and distance, blur, and intensity control how pronounced the effect reads — from a barely-there flat panel to a strongly extruded button.
Content and presets
An icon or short text label can be placed inside the panel to preview it as an actual button rather than an empty shape. Six presets — Soft Extrude, Deep Press, Subtle Flat, Sharp Emboss, Circular Button, and Reset — plus a randomize button cover common starting points.
Getting the CSS out
Export as plain CSS, a Tailwind arbitrary-value class string, SCSS, or a React inline style object, copyable with one click.
Privacy
Everything runs locally in your browser -- nothing you build is sent to a server.