How are the two shadow colors chosen?

The highlight is the base color lightened by 20 percent multiplied by your intensity, and the shade is the base darkened by the same amount. At the default 50 percent that is a 10 percent shift each way.

What is the difference between concave and convex?

Both keep outer shadows. Convex adds a 145-degree gradient from light to dark so the surface bulges, while concave reverses the gradient so it dips. Pressed switches to inset shadows.

Is the Size slider part of the CSS?

No. It only changes the preview square. The generated block contains background, radius and shadows, so you set width and height yourself.

Why does my element vanish on a different page color?

The effect depends on the element's fill being the same as its surroundings. Place it on a page background equal to your base color, otherwise the fake depth breaks.

Design toolsInstantPrivateNo account

Neumorphism Generator

Neumorphism, or soft UI, makes an element look pushed out of or into a surface using two opposing shadows.

Back to category

About Neumorphism generator

Neumorphism, or soft UI, makes an element look pushed out of or into a surface using two opposing shadows. You choose the base color and a shape, and the tool calculates a lighter and a darker shade from it to build the pair. It suits designers experimenting with tactile buttons and cards.

How to use it

Set the Base color, which should match the page background you will place the element on.
Choose a Shape: flat, concave, convex or pressed.
Use Size to resize the preview square, and Border radius to round its corners from 0 to 50 pixels.
Set Distance from 5 to 50 pixels and Blur from 10 to 80 pixels to control how far the shadows travel and how soft they are.
Move Intensity to change how much lighter and darker the two shadow colors are, then press Copy CSS.

Default flat shape

Input

Base #e0e5ec, distance 20, blur 40, intensity 50 percent

Output

background: #e0e5ec;
border-radius: 12px;
box-shadow: 20px 20px 40px #c0cad9,
            -20px -20px 40px #ffffff;

When to use it

Designing a raised toggle or button for a music-player or smart-home dashboard mockup.
Making an inset search field with the pressed shape.
Comparing convex and concave surfaces before committing to one for a card set.
Deriving shadow colors that are already tuned to a brand's off-white background.

Good to know. Soft UI has low contrast by nature, so add clear labels and focus outlines to interactive controls built with it.

Questions about Neumorphism generator

How are the two shadow colors chosen?: The highlight is the base color lightened by 20 percent multiplied by your intensity, and the shade is the base darkened by the same amount. At the default 50 percent that is a 10 percent shift each way.
What is the difference between concave and convex?: Both keep outer shadows. Convex adds a 145-degree gradient from light to dark so the surface bulges, while concave reverses the gradient so it dips. Pressed switches to inset shadows.
Is the Size slider part of the CSS?: No. It only changes the preview square. The generated block contains background, radius and shadows, so you set width and height yourself.
Why does my element vanish on a different page color?: The effect depends on the element's fill being the same as its surroundings. Place it on a page background equal to your base color, otherwise the fake depth breaks.

Related tools

Design toolsInstantPrivateNo account

Neumorphism Generator

Neumorphism, or soft UI, makes an element look pushed out of or into a surface using two opposing shadows.

Back to category

WorkbenchClient-side · Private

About Neumorphism generator

How to use it

Set the Base color, which should match the page background you will place the element on.
Choose a Shape: flat, concave, convex or pressed.
Use Size to resize the preview square, and Border radius to round its corners from 0 to 50 pixels.
Set Distance from 5 to 50 pixels and Blur from 10 to 80 pixels to control how far the shadows travel and how soft they are.
Move Intensity to change how much lighter and darker the two shadow colors are, then press Copy CSS.

Default flat shape

Input

Base #e0e5ec, distance 20, blur 40, intensity 50 percent

Output

background: #e0e5ec;
border-radius: 12px;
box-shadow: 20px 20px 40px #c0cad9,
            -20px -20px 40px #ffffff;

When to use it

Designing a raised toggle or button for a music-player or smart-home dashboard mockup.
Making an inset search field with the pressed shape.
Comparing convex and concave surfaces before committing to one for a card set.
Deriving shadow colors that are already tuned to a brand's off-white background.

Good to know. Soft UI has low contrast by nature, so add clear labels and focus outlines to interactive controls built with it.

Questions about Neumorphism generator

How are the two shadow colors chosen?: The highlight is the base color lightened by 20 percent multiplied by your intensity, and the shade is the base darkened by the same amount. At the default 50 percent that is a 10 percent shift each way.
What is the difference between concave and convex?: Both keep outer shadows. Convex adds a 145-degree gradient from light to dark so the surface bulges, while concave reverses the gradient so it dips. Pressed switches to inset shadows.
Is the Size slider part of the CSS?: No. It only changes the preview square. The generated block contains background, radius and shadows, so you set width and height yourself.
Why does my element vanish on a different page color?: The effect depends on the element's fill being the same as its surroundings. Place it on a page background equal to your base color, otherwise the fake depth breaks.

Search tools

Neumorphism Generator

About Neumorphism generator

How to use it

Default flat shape

When to use it

Questions about Neumorphism generator

How are the two shadow colors chosen?

What is the difference between concave and convex?

Is the Size slider part of the CSS?

Why does my element vanish on a different page color?

Related tools

Neumorphism Generator

About Neumorphism generator

How to use it

Default flat shape

When to use it

Questions about Neumorphism generator

How are the two shadow colors chosen?

What is the difference between concave and convex?

Is the Size slider part of the CSS?

Why does my element vanish on a different page color?

Related tools