Neumorphism CSS Generator
Generate soft UI (neumorphism) CSS: light and dark shadows derived from your base color, flat, concave, convex or pressed shapes and four light directions.
Neumorphism settings
Light and dark shadows are derived from the base color by raising and lowering its OKLCH lightness by the intensity. Use the same color for the page background.
Preview
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
Related Tools
View AllWhat is Neumorphism Generator?
Produces the soft-UI look where an element seems extruded from (or pressed into) the page. It derives a lighter and a darker shadow colour from your base colour and combines them as two opposite box-shadows, with optional gradient fills for concave and convex surfaces.
How to use Neumorphism Generator
- Enter the Base color (use the same colour for your page background).
- Choose the Shape: Flat, Concave, Convex or Pressed.
- Pick the Light source direction.
- Adjust Distance, Blur, Intensity, Radius and preview Size.
- Copy the CSS code.
Example
Base #e0e0e0, flat, light from top left, distance 20px, blur 60px, intensity 0.15, radius 50px
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
When to use Neumorphism Generator
Use it for playful dashboards, smart-home or music app controls and portfolio pieces. Neumorphism has low contrast by nature, so do not rely on it alone for important buttons or form fields; add clear labels, icons or a focus ring for accessibility.
How Neumorphism Generator works
The light and dark shadow colours are computed in OKLCH by raising and lowering the base colour's lightness by the intensity while keeping hue and chroma (gamut-mapped to sRGB), so it also works for coloured and dark bases. The dark shadow is offset away from the light source by the distance and the light shadow towards it, both with the same blur. Pressed uses two inset shadows. Concave and convex add a linear-gradient whose angle follows the light direction, using colours one third of the intensity lighter and darker.
Common Use Cases
- Soft toggle and push buttons
- Dashboard cards on a matching background
- Pressed state for active controls
- Calculator or music player UIs
- Dark-mode soft UI by using a dark base colour
FAQs
Why must the page background match the base colour?
The illusion comes from the element being the same colour as its surroundings, with only the shadows revealing its shape. A different background breaks the effect.
Does it work on dark colours?
Yes. Because lightness is shifted in OKLCH rather than multiplied, a dark base still gets a visibly lighter highlight shadow.
What is the difference between concave and convex?
Convex is lighter on the side facing the light (it bulges out); concave is darker there (it looks scooped in).