The Neumorphism Generator creates the soft-UI “neumorphic” look, where buttons and cards appear gently extruded from — or pressed into — the background. Choose the surface colour, size, corner radius, shadow distance and blur, and a shape, and copy the CSS with a live preview.
Neumorphism works by giving an element the same colour as its background and adding two shadows: a light one on the top-left and a dark one on the bottom-right. This tool calculates those shadow colours from your surface colour automatically. Everything runs in your browser.
How to create a neumorphism effect
- Pick the surface colour — the element and its background must share this colour.
- Choose a shape: flat, concave, convex, or pressed (inset).
- Adjust the size, radius, shadow distance, and blur until it looks right.
- Copy the CSS and apply it to an element whose parent uses the same surface colour.
Flat, concave, convex, and pressed
Flat keeps the surface a single colour with the soft dual shadows, so the element looks raised off the page. Convex adds a subtle light-to-dark gradient so the surface looks like it bulges outward, while concave uses the opposite gradient so it looks scooped inward. Pressed switches to inset shadows so the element appears pushed into the background — perfect for active or toggled buttons.
Why the background colour matters
Neumorphism depends entirely on the element and its parent sharing the same background colour. The two soft shadows are simply lighter and darker shades of that colour, which is what makes the element look moulded from the surface rather than sitting on top of it. On a mismatched or pure-white background the effect falls apart, so set your page or container to the same surface colour.
Frequently Asked Questions
What is neumorphism?
Neumorphism (soft UI) is a design style where elements look softly extruded from or pressed into the background, created with a matching background colour and two subtle shadows — one light, one dark.
Why does my neumorphism effect look wrong?
Almost always because the element and its parent do not share the same background colour. The effect relies on that match; set the container to the same surface colour you chose here.
What is the difference between the shapes?
Flat is a plain raised surface; convex bulges outward and concave scoops inward using a subtle gradient; pressed uses inset shadows so the element looks pushed in, which is great for active states.
How are the shadow colours chosen?
They are derived from your surface colour — a lighter shade for the top-left highlight and a darker shade for the bottom-right shadow — so they always match your chosen colour.