Neumorphism (or soft UI) is a design style that simulates extruded plastic surfaces using light and dark shadows on a monochromatic background. It creates a tactile, raised or indented look without actual images.

Why do I need two shadow colors?

Neumorphism uses two shadows: a lighter shadow on the top-left (simulating a light source from the top-left) and a darker shadow on the bottom-right. This dual-shadow effect creates the illusion of depth and material thickness.

What is the difference between flat, concave, convex, and pressed?

Flat has uniform surface color. Concave uses a gradient that dips inward. Convex uses a gradient that bulges outward. Pressed reverses the shadow directions to simulate a button being pushed in.

Does neumorphism work on any background color?

Neumorphism works best on medium-value colors — not too dark, not too light. Very dark or very light backgrounds reduce the visible shadow contrast. Mid-range grays and muted pastels give the best results.

Design Gratuito Sem cadastro

CSS Neumorphism Generator

Generate CSS neumorphism / soft UI box-shadow styles with live preview.

Carregando ferramenta…

Sobre esta ferramenta

Design soft, extruded UI elements with the CSS Neumorphism Generator. Adjust background color, shadow distance, blur radius, shadow intensity, and shape style (flat, concave, convex, or pressed). The generator automatically calculates the correct light and dark shadow colors from your base color, producing the signature neumorphic look. Copy the generated CSS box-shadow code straight into your stylesheet.

Como usar

1 Pick a background color using the color picker.
2 Adjust the shadow distance, blur radius, and intensity sliders.
3 Select a shape style: flat, concave, convex, or pressed.
4 Preview the result on the live shape preview.
5 Click 'Copy CSS' to copy the generated box-shadow code.

Perguntas frequentes

Ferramentas relacionadas

Gerador de QR Code

Crie visualmente gradientes CSS lineares e radiais e copie a propriedade CSS pronta para uso.

Gerador de QR Code

Crie valores de box-shadow CSS visualmente com prévia ao vivo — suporta múltiplas camadas.