← All Tools
Neumorphism Card Generator🔒 100% local
Generate neumorphism (soft UI) CSS and preview a matching card
Only the surface color is required — the rest default to 24, 8, 16, 0.3, flat. Shape is one of flat, pressed, convex, concave.
Builds a neumorphism (soft UI) card: it derives a dark and a light shadow colour from the surface colour you supply, emits the box-shadow list for flat, pressed, convex or concave, and prints copy-ready CSS plus matching HTML. A live preview renders the card, and the output reports the contrast ratio of the text colour it chose.
How to use it
- Type the settings as one comma-separated line: surface hex, radius, distance, blur, intensity, shape, label text. Only the surface is required - "#e0e5ec" on its own works and the rest default to 24, 8, 16, 0.3, flat.
- Press Generate CSS to get the preview, the CSS block and the HTML snippet.
- Press Use example to fill the box with "#e0e5ec, 24, 8, 16, 0.3, flat, Soft UI".
Worked example
#e0e5ec, 24, 8, 16, 0.3, flat, Soft UIbecomesNeumorphism card — flat shape
Surface #e0e5ec
Shadow dark #9da0a5
Shadow light #eff1f5
Radius 24px Distance 8px Blur 16px Intensity 0.3
Text on card #1a1a1a (contrast 16.59:1)
--- CSS ---
.neumorphism-card {
background: #e0e5ec;
border-radius: 24px;
box-shadow: 8px 8px 16px #9da0a5, -8px -8px 16px #eff1f5;
padding: 32px;
color: #1a1a1a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
transition: box-shadow 0.2s ease;
}Cut after the first CSS rule. The full output also adds a :hover rule, an HTML snippet and the notes block.
#2b2f36, 20, 10, 20, 0.4, pressed, Darkbecomesbox-shadow: inset 10px 10px 20px #1a1c20, inset -10px -10px 20px #aaacafThe pressed shape returns both shadows inset; shown here as the box-shadow value alone.
When to use it
- Producing a matching highlight and shadow pair for a soft-UI dashboard.
- Checking the text contrast a neumorphism card would ship with before you build the component.
- Getting consistent padding and radius values across a set of cards.
What it does not do
- The surface must be a 3- or 6-digit hex value. "rgba(224,229,236,1)", "#e0e5ecff" and CSS colour names are all rejected with "Surface must be a 3 or 6 digit hex color".
- Shadow colours are single opaque hex values with no alpha channel, so the shadows cannot be softened with opacity the way many neumorphism designs do.
- The effect only reads correctly when the card and its page share the surface colour - on any other background the two shadows look like a stray highlight and a stray shade. The preview is deliberately painted with the surface colour for that reason.
- Intensity is capped: it must sit between 0.05 and 1, darkening stops at 0.5 and lightening at 0.6, so a fully black or fully white shadow is not reachable.