CSS Neumorphism Generator
Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.
Preview
Soft UI / Neumorphism
Neumorphism (também chamado Soft UI) cria a ilusão de elementos extrudidos da superfície usando duas sombras opostas: uma clara no topo-esquerda e uma escura no embaixo-direita. Pressionado é o inverso, com sombras inset.
Importante: a cor do fundo da página precisa ser igual à cor base do elemento — sem isso, o efeito não funciona. Por isso esta página força o fundo do preview com a cor escolhida.
Acessibilidade: o contraste em neumorphism é baixo por design. Use textos com contraste maior ou complemente com cor sólida em ações importantes. Tudo no navegador.
Create the Soft UI effect (neumorphism)
Neumorphism, also known as Soft UI, is that style where elements look sculpted from the surface itself, with a soft relief that rises out of or sinks into the background. The trick is combining two complementary shadows, one light and one dark. That's exactly what the generator builds for you, visually.
Choose the base colour and adjust the distance, blur and type of relief (extruded, flat or pressed), following the result in real time. When you like it, copy the ready CSS, with both box-shadows already calculated so the effect stays coherent.
Nothing needs installing, since it all happens in the browser. So you can experiment with this interface style without guessing shadow values in the dark.
Related Tools
CSS Box Shadow Generator
Create CSS box shadows with real-time preview. Configure multiple shadow layers, color, blur, spread and inset. Copy the CSS code.
Mesh Gradient Generator
Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.
CSS Button Generator
Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.