CSS Neumorphism Generator

What is CSS Neumorphism Generator?

CSS Neumorphism Generator is a free visual tool for crafting the soft-UI (neumorphism) look, where elements appear extruded from or pressed into the surface using two offset shadows of the same hue. It is built for UI designers and front-end developers who want that subtle, tactile depth without hand-tuning paired box-shadows. Set a base color with the picker or a hex field, switch the Shape between Flat, Concave and Convex, and adjust the Distance (how far the shadows offset), Intensity (how strong the light/dark contrast is), Blur (softness) and Radius (corner rounding). The tool derives a lighter highlight and a darker shadow from your base color and combines them — optionally layering a subtle gradient for concave and convex shapes — into a single CSS rule, shown live on a matching background and output as copyable code.

How to use CSS Neumorphism Generator

1. Choose your base surface color with the swatch or by typing a hex value such as #e0e5ec.
2. Pick a Shape: Flat for a raised panel, Concave for a pressed-in dish, or Convex for a domed bump.
3. Set the Distance to move the light and dark shadows further out for a deeper extrusion.
4. Adjust the Intensity to make the highlight/shadow contrast stronger or more subtle.
5. Tune the Blur for softer or sharper edges and the Radius to round the corners.
6. Check the live preview, then copy the generated neumorphism CSS into your stylesheet.

Examples

color #e0e5ec, shape Flat, distance 12, intensity 15, blur 24, radius 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

color #e0e5ec, shape Concave, distance 8, intensity 15, blur 16, radius 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

color #3a3f47, shape Convex, distance 6, intensity 20, blur 12, radius 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Frequently asked questions

What is neumorphism?

Neumorphism (or soft UI) is a style where elements look extruded from or pressed into a single-color surface, using two offset box-shadows of the same hue — a lighter one on the top-left and a darker one on the bottom-right. This tool derives both shadows from your base color so they always match the surface.

What is the difference between Flat, Concave and Convex?

Flat keeps the surface a single solid color so the element looks raised above the background. Concave adds a subtle gradient that darkens toward the top-left, making it look scooped inward. Convex flips the gradient so the center looks domed and lifted. The light and dark shadows stay the same; only the surface fill changes.

How do Distance, Intensity, Blur and Radius work?

Distance is the pixel offset of both shadows — larger values push the element further off the surface. Intensity controls how much lighter and darker the two shadow colors are than the base. Blur softens the shadow edges, and Radius rounds the corners. The CSS updates live as you change any of them.

Which color should I use for the background?

Neumorphism only reads correctly when the element sits on a surface of the same base color — apply the same color to the parent or page background. The preview uses your base color as its backdrop so you can judge the effect accurately before copying.

Is my data uploaded anywhere?

No. The generator runs entirely in your browser with JavaScript — your color and settings are never sent to a server, so it works privately and even offline once the page has loaded.