Neumorphism Generator
Generate soft UI, neumorphic CSS. Set the background, size, radius, shadow distance, intensity and blur, and pick flat, concave, convex or pressed. Copy the dual box-shadow that makes the look.
This neumorphism generator builds the soft, extruded look where an element seems pressed out of or into its background. Set the background colour, size, radius, shadow distance, intensity and blur, then pick a shape — flat, concave, convex or pressed. As a neumorphic shadow generator it derives a light highlight and a dark shadow from your base colour and writes the dual box-shadow that sells the effect. Use this soft UI CSS tool to copy clean neumorphism css straight into your project.
Soft UI reads best on a background that matches the element. Keep the intensity low for a subtle emboss; the pressed shape flips both shadows inset for a sunken look.
.neu {
border-radius: 32px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;
}How it works
- 1
Set the surface
Choose the background colour, size and corner radius. The preview sits on a matching background, which soft UI needs.
- 2
Tune the shadows
Set the distance, intensity and blur. This neumorphic shadow generator builds a light and a dark shadow from your colour.
- 3
Pick a shape and copy
Switch between flat, concave, convex and pressed, then copy the neumorphism css.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- What is neumorphism, or soft UI?
- It’s a style where elements look moulded from the background using two shadows — a light one and a dark one on opposite corners. The result seems softly raised or pressed in rather than sitting on a card.
- Why does the effect need a matching background?
- The light and dark shadows are tints of the surface colour, so they only read against that same colour. On a contrasting background the shadows look wrong, which is why the preview uses your chosen colour behind the element.
- What do the concave and convex shapes do?
- They add a subtle gradient across the face so it looks curved inward or bulged outward. Flat keeps the face solid, and pressed flips the shadows inset so the shape looks sunken.
- Is neumorphism accessible?
- Use it carefully. Low-contrast soft UI can be hard to read, especially for buttons and inputs, so keep enough contrast for text and focus states and don’t rely on the shadow alone to signal that something is interactive.
- How does the neumorphic shadow generator pick the shadow colours?
- It lightens your base colour for the highlight and darkens it for the shadow, scaled by the intensity slider. Raising intensity pushes both further from the base for a stronger emboss.
More tools
More from the Hivly network
Free sister tools on our other sites.
