ffee All tools
EN 中文 FR DE

Neumorphism Generator

Generate soft UI shadows and copy the neumorphism CSS.

Build a soft UI card

Soft UI
Shadows: —
Both shadow colours are derived from the surface colour you pick.

How to use the Neumorphism Generator

  1. Pick the base surface colour for the background and the card.
  2. Adjust the shadow distance, blur and radius, then choose a shape preset.
  3. Copy the soft UI rule into your own stylesheet.

Features

Advertisement

More tools

Flexbox Generator CSS Grid Generator Button Style Generator CSS Animation Generator CSS Transition Generator CSS Transform Generator CSS Filter Generator Glassmorphism Generator Breakpoint Preview Font Pairing Tool Line Height Calculator Modular Scale Calculator

Frequently Asked Questions

Common questions about the free online neumorphism generator.

It is a soft interface style where elements appear extruded from the background using two shadows and a matching surface colour.
One dark shadow sits on the bottom right and one light shadow sits on the top left, which fakes a raised surface.
Both shadows move inside the element with the inset keyword, so the surface looks pressed into the page.
The low contrast between surfaces makes controls hard to spot, so always add a clear label, icon or border.
Use a mid tone such as a soft grey or blue grey. Very dark or very light bases leave little room for both shadows.
Flat keeps a solid background, while convex adds a subtle gradient so the surface looks rounded rather than level.
Yes. Apply the raised style at rest and the inset style while the button is pressed for a tactile effect.
Yes. It is completely free, needs no account and runs locally in your browser without any network requests.

Last updated: October 10, 2026