About the Neumorphism Generator
Neumorphism Generator creates the soft, extruded look known as neumorphism or soft UI. Pick a base colour, set the size, corner radius, shadow distance, blur and strength, and choose a flat, concave, convex or pressed-in surface. The page shows the shape on a background of the same colour and writes the CSS: a matching background and two box shadows, a dark one on one corner and a light one on the opposite corner, with inset shadows for the pressed state. Copy the code into your stylesheet. It all runs in your browser.
Updated October 2026
How to use the Neumorphism Generator
- 1Pick the base colour; use a light grey or a soft pastel.
- 2Set the size and corner radius of the shape.
- 3Adjust the distance, blur and strength of the shadows.
- 4Choose flat, concave, convex or pressed in.
- 5Copy the CSS.
The idea of soft UI
In neumorphism the element and its background are the same colour. The shape is revealed only by its shadows: a light one on the side that faces the imagined light, and a dark one on the opposite side. The effect feels tactile and calm, which is why it is popular for dashboards, calculators and smart-home panels.
Tuning the controls
Small changes make a big difference. Larger distances and blur make the shape float higher, while a smaller strength keeps the look gentle. Match the radius to the size to keep the shape friendly.
- Distance 8 to 16 px for buttons
- Distance 20 px or more for big cards
- Strength 10% to 20% for a subtle look
- Pressed in for active or toggled-on states
Use it with care
Because contrast is low, use neumorphism for decoration and keep text and critical controls high contrast. Add a visible focus outline for keyboard users. A single accent colour on the main action helps people find it.
Related tools
Try the frosted look with the Glassmorphism Generator, make ordinary shadows with the Box Shadow Generator and shape corners with the Border Radius Generator. The CSS Button Generator makes standard buttons.
Features
- Light and dark shadows worked out from your colour
- Flat, concave, convex and pressed surfaces
- Size, radius, distance, blur and strength controls
- Live preview on the same colour
- Copy the CSS
- Private: nothing is uploaded
Frequently asked questions
What is neumorphism?
A design style where elements look like soft shapes pushed out of the background or pressed into it, made with a light and a dark shadow on the same colour as the page.
How does the CSS work?
The element has the same background colour as the page, plus a dark box-shadow toward the bottom right and a light one toward the top left. Inset shadows make it look pressed in.
Which background colours work best?
Mid-light colours such as #e0e5ec. Very dark or very bright colours leave little room for a darker or lighter shadow.
Is neumorphism accessible?
It can be a problem: the low contrast makes buttons hard to see for some people. Add clear labels, icons or colour for important controls, and test contrast.
How do I make a pressed button?
Choose Pressed in. The shadows turn inward, as if the button is pushed into the surface. Swap between flat and pressed on click for a toggle effect.
What do concave and convex do?
They add a slight gradient so that the surface looks curved inward or outward.
Will it work on every browser?
Yes. It uses only box-shadow and background, which every browser supports.
Can I use neumorphism on a dark background?
Yes. Choose a dark grey base such as #2b2f36. The light shadow is brighter than the base and the dark shadow is darker, so the effect still shows, just more quietly.
How do I make a round button?
Set the radius to half of the size, for example 110 px for a 220 px shape, and the element becomes a circle.
Is my design uploaded?
No. Everything is made in your browser.