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 Gratis Sin registro

CSS Neumorphism Generator

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

Cargando la herramienta…

Acerca de esta herramienta

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.

Cómo 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.

Preguntas frecuentes

Herramientas relacionadas

Generador de códigos QR

Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.

Generador de códigos QR

Construya visualmente valores de box-shadow de CSS con vista previa en vivo — admite múltiples capas.