Estúdio Neumorfismo

Gerador Neumorfismo CSS & Soft UI

Crie sombras suaves em relevo, rebaixadas e planas com nosso Gerador de Neumorfismo CSS. Copie código limpo e ajuste ângulo, desfoque e contraste em tempo real.

Predefinições:
Estágio Visual e Estúdio de Iluminação
Relevo (Extruded)Toque para alternar o estado
145°
#e0e5ec
Tamanho do Elemento240px
Raio da Borda32px
Distância da Elevação12px
Suavidade do Desfoque24px
Raio de Expansão (Spread)0px
Intensidade e Contraste15%
Ângulo de Incidência da Luz145°
145°
Estúdio de Luz VirtualArraste a lâmpada para posicionar a fonte de luz
Harmonização Cromática de SombrasHarmoniza o tom da sombra com o fundo, evitando tons de cinza desbotados
Variáveis CSS Personalizadas (:root)Exporte design tokens estruturados para uma arquitetura CSS limpa
Borda de Realce Acessível (WCAG AA 3:1)Microborda dupla de 1px para telas de baixo contraste
Vetor Polar: dx=10px, dy=7px | 145°Física O(1)
/* Neumorphic Soft UI Element */
.soft-ui-surface {
  width: 240px;
  height: 240px;
  border-radius: 32px;
  background: #e0e5ec;
  box-shadow: 10px 7px 24px #b5c3d5, -10px -7px 24px #e5e9ee;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease;
}
/* Interactive Elevate & Depress States */
.soft-ui-surface:hover {
  box-shadow: 13px 9px 30px #b5c3d5, -13px -9px 30px #e5e9ee;
  transform: translateY(-2px);
}
.soft-ui-surface:active {
  box-shadow: inset 10px 7px 24px #b5c3d5, inset -10px -7px 24px #e5e9ee;
  transform: translateY(0);
}
Formato: CSS Puro | 569 bytesPronto para Produção
Contraste Não Textual WCAG AA
1.41:1

Ative a Borda de Realce para monitores de baixo contraste

Vetor Polar de Luz
145° / 12px

Coordenadas opostas de luz especular e ambiente

Penumbra Gaussiana
24px (Automático 2:1)

Fator de difusão óptica para percepção realista de profundidade

Processamento no Cliente

Cálculo vetorial e simulação óptica executados inteiramente na memória local do navegador.

Privacidade Zero Upload

Seus dados de design permanecem estritamente locais, sem envio para servidores externos.

Exportação Pronta para Produção

Código CSS, classes Tailwind e mixins SCSS limpos e otimizados para implantação imediata.

Referência técnica e guia de arquitetura

Gerador de Neumorfismo CSS & Soft UI — Guia de referência

Projete sombras box-shadow suaves, extrudadas e inset em estilo Soft UI com nosso Gerador de Neumorfismo CSS. Ajuste ângulo da luz, desfoque e contraste em tempo real com código limpo.

Gerador de Neumorfismo CSS & Soft UI — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados
Gerador de Neumorfismo CSS & Soft UI — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados

Parâmetros-chave e controles

Cor da Superfíciestring de cor hex / hsl

Cor de fundo cromática do contêiner idêntica à tela pai (canvas). Limites de luminosidade entre 80% e 94% no modo claro (ex.: #e0e5ec) ou entre 10% e 20% no modo escuro proporcionam distinção óptica ideal das sombras, sem estourar os realces especulares nem achatar as sombras ambientes.

Padrão: #e0e5ec
Distância da Sombrainteiro em pixels (2px - 50px)

Deslocamento de coordenadas espaciais em pixels que simula a elevação percebida no eixo Z em relação ao plano de fundo. Na óptica física, a projeção realista de luz diurna exige que o raio de desfoque mantenha uma proporção de 2:1 em relação à distância.

Padrão: 12px
Raio de Desfoqueinteiro em pixels (4px - 100px)

Raio de difusão da penumbra gaussiana. Proporções abaixo de 1,5x a distância geram chanfros artificiais e duros, enquanto proporções superiores a 3,0x provocam desbotamento excessivo da sombra e perda de definição tátil das bordas.

Padrão: 24px
Ângulo da Luzgrau angular (0deg - 360deg)

Vetor polar de incidência luminosa. Diretrizes ergonômicas de interface humana estabelecem entre 135° e 145° (iluminação superior esquerda) como linha de base primária, alinhando-se à direção natural de leitura e à iluminação zenital padrão.

Padrão: 145deg
Intensidade da Sombraporcentagem (5% - 40%)

Multiplicador do canal alfa que modula o escurecimento da sombra e a luminescência do realce. Valores elevados (>30%) amplificam a profundidade dramática, mas causam fadiga visual e provocam efeito de bandas de cor (banding) sRGB de 8 bits em monitores comuns.

Padrão: 15%
Forma da Superfícieenum de perfil de elevação (flat | concave | convex | pressed)

Topologia geométrica da superfície: Plana (Flat, box-shadow duplo puro), Côncava (Concave, gradiente linear invertido no eixo da luz), Convexa (Convex, gradiente esférico projetado) ou Pressionada/Rebaixada (Pressed/Inset, sombras internas duplas para botões ativos e campos de entrada).

Padrão: flat

Dicas profissionais e melhores práticas

Harmonização Cromática de Sombras vs Cinza Lamacento

Sombras pretas puras rgba(0, 0, 0, alpha) sobre fundos pastel ou coloridos criam um artefato visual cinza, turvo e artificial. No Soft UI profissional, aplica-se tingimento cromático na sombra: desloca-se o matiz (hue) da sombra escura em direção ao matiz da superfície base, reduzindo a luminosidade em 15% a 20% e elevando a saturação em 5% a 10% no espaço de cor LCH ou HSL.

A Proporção Áurea Física de 2:1 entre Desfoque e Distância

Na óptica esqueumórfica física, uma fonte de luz pontual gera umbra e penumbra cuja suavidade varia linearmente com a elevação. Configurar blur = 2 * distance e spread = 0 produz a estética Soft UI mais autêntica e orgânica. Definir valores de propagação (spread) diferentes de zero frequentemente gera bordas duras artificiais que destroem a ilusão de continuidade da superfície.

Superando a Armadilha de Contraste Não Textual WCAG AA

Botões neumórficos falham inerentemente no Critério de Sucesso 1.4.11 da WCAG 2.1 (contraste mínimo de 3:1 para componentes de interface) porque a cor da superfície é idêntica à do fundo. Para aprovar auditorias de acessibilidade sem perder a estética, adicione um traço de contorno de 1px semitransparente (rgba(var(--text-color), 0.15)) ou combine a sombra suave com ícones ou textos de alto contraste acima de 4,5:1.

Armadilhas comuns e solução de problemas

⚠️Artefatos de banding e degraus de gradiente visíveis em telas OLED móveis ou monitores de 8 bits

Gradientes sutis e desfoques profundos causam faixas visíveis de quantização em 8 bits (banding). Solucione adicionando um pseudo-elemento CSS com filtro SVG monocromático de ruído/grão sutil (feTurbulence com opacidade 0.03) ou limitando o raio de desfoque a menos de 40px com uma leve redução na distância.

⚠️Sombra interna (inset box-shadow) sobrepondo texto ou vazando pelo border-radius no Safari WebKit

O motor WebKit às vezes extrapola sombras inset além dos cantos arredondados durante transformações aceleradas por hardware. Garanta que o contêiner possua overflow: hidden, border-radius explícito e um contexto de empilhamento isolado com transform: translateZ(0) ou will-change: transform.

⚠️Estados de hover neumórficos tremulando ou causando alto consumo de CPU e reflow em transições

Animar múltiplas propriedades box-shadow força ciclos custosos de repintura (repaint) na CPU a cada quadro. Em vez de aplicar transition direto no box-shadow, faça um cross-fade entre dois pseudo-elementos posicionados absolutamente (::before e ::after) usando transição de opacity com will-change: opacity, obtendo transições fluidas a 60 fps compostas na GPU.

Perguntas frequentes (FAQ)

Como calcular matematicamente sombras neumórficas em CSS?▼

Sombras neumórficas em CSS utilizam duas declarações complementares de box-shadow derivadas das coordenadas polares da luz (theta) e da distância (d): offset-x = d * cos(theta), offset-y = d * sin(theta). O realce especular oposto projeta (-offset-x, -offset-y) com uma cor clareada entre 10% e 20% em relação ao fundo, enquanto a sombra ambiente projeta (+offset-x, +offset-y) escurecida entre 10% e 25%, combinada a um raio de desfoque gaussiano de penumbra calibrado exatamente para 2 * d.

Qual é a melhor cor de fundo para interfaces em estilo Neumorfismo?▼

Tons intermediários de cinza-claro (off-white) e ardósia suave com luminosidade entre 88% e 94% (especialmente os códigos hexadecimais #e0e5ec, #ebecf0 ou HSL 215, 20%, 91%) oferecem o alcance dinâmico ideal para o neumorfismo. O branco puro (#ffffff) não funciona porque os realces especulares sofrem corte (clipping) sem contraste visível, enquanto o preto puro (#000000) anula por completo a visibilidade das sombras ambientes escuras.

Qual é a diferença entre neumorfismo, glassmorfismo e esqueumorfismo?▼

O neumorfismo projeta superfícies monocromáticas em relevo a partir do plano de fundo usando duas sombras box-shadow opostas e suaves; o glassmorfismo baseia-se em painéis translúcidos multicamadas com desfoque de fundo (backdrop-filter: blur()); já o esqueumorfismo renderiza texturas hiper-realistas do mundo físico (couro, alumínio escovado, chanfros metálicos) com gradientes especulares complexos e modelos de iluminação 3D.

Por que interfaces neumórficas costumam falhar em auditorias de acessibilidade WCAG 2.1 AA?▼

Controles neumórficos falham no Critério de Sucesso 1.4.11 da WCAG 2.1 (que exige taxa de contraste de 3:1 para componentes de interface) porque a superfície do elemento interativo compartilha a mesma cor hexadecimal 1:1 com a tela de fundo. Para garantir conformidade regulatória sem abrir mão do Soft UI, engenheiros e designers aplicam uma borda perimétrica de 1px semitransparente (rgba(0, 0, 0, 0.15)) ou asseguram que a tipografia e os ícones interativos atinjam individualmente uma proporção de contraste de 4,5:1 contra o fundo sob o Critério 1.4.3 da WCAG.

Ferramentas e utilitários relacionados

Todas as ferramentas →
Gerador de Paletas de Cores & HarmoniasDesign

Gere esquemas e harmonias de paletas de cores instantaneamente. Crie paletas complementares, análogas, triádicas e meio-complementares com verificação de contraste WCAG em tempo real e exportação CSS.

Abrir ferramenta→
Gerador Glassmorphism CSS & Vidro FoscoDesign

Gere código CSS moderno de glassmorphism e vidro fosco com ajustes em tempo real de desfoque backdrop-filter, opacidade, borda e sombra. Copie HTML e CSS limpos.

Abrir ferramenta→
Comprimir Imagens & Reduzir FotosDesign

Comprima imagens online sem perda de qualidade. Reduza tamanhos de JPG, PNG e WebP direto no navegador, sem upload para servidores, com ajuste exato de KB e exportação em lote ZIP.

Abrir ferramenta→
Gerador Interativo de Gradientes CSS Lineares e RadiaisDesign

Todo processamento e conversão acontecem exclusivamente na memória do seu navegador sem envio para servidores.

Abrir ferramenta→
Gerador de Sombras CSS em Camadas (Box Shadow)Design

Crie sombras CSS multicamadas ultra-realistas com elevação óptica, relevo interno, dispersão e exportação rápida para Tailwind, CSS e React.

Abrir ferramenta→
Gerador de CSS Clip-Path de Polígonos e Máscaras VetoriaisDesign

Desenhe caminhos de recorte geométricos responsivos e máscaras vetoriais SVG com vértices interativos arrastáveis e CSS em tempo real.

Abrir ferramenta→