Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Neumorfismo com CSS

CorDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

Estilos Predefinidos

Predefinição

Cor Base

Fundo

A cor de fundo do elemento e de seu entorno

Forma

Tipo de Forma

Tamanho do elemento (px): 200

Raio da Borda (px): 50

Sombra

Distância (px): 20 Quanto a sombra se estende do elemento

Intensidade (%): 15 Contraste entre sombras claras e escuras

Desfoque (px): 60

Ângulo da luz: 145 Direção do fornecimento da luz (em graus)

SAÍDA

Lado cliente

Visualização ao Vivo

CSS Gerado

ANUNCIADO Remover?

Guia

Gerador de Neumorfismo com CSS

Crie elementos "neumórficos" suaves e projetados sem precisar ajustar manualmente duas sombras de caixa opostas. Escolha uma cor base, escolha uma forma (plana, concava, convexa ou pressionada), arraste os sliders para distância, intensidade, desfoque e ângulo da luz, depois copie o CSS gerado diretamente para seu projeto.

Como usar

Escolha uma cor de fundo. A mesma cor é usada para o elemento e para o canvas ao redor — isso é o que torna o neumorfismo funcionar.
Escolha uma forma: Plano, Concava (dip suave), Convexa (elevação suave), ou Recorte Interno (pressionada).
Ajuste Distância e Ângulo da luz para definir a direção da sombra.
Ajuste Intensidade e Blur até que a superfície sinta certo.
Copie o CSS, ou ative Mostrar HTML + CSS para obter um trecho pronto para colar.

Características

Pré-visualização em tempo real — todo ajuste no slider atualiza o elemento renderizado instantaneamente.
Cinco presétos integrados — Soft Light, Strong Light, Soft Dark, Strong Dark e Pressed.
Cores das sombras derivadas automaticamente — as sombras claras e escuras são aprimoradas matematicamente a partir da sua cor base, para que o efeito sempre se mantenha consistente.
Gradientes concavo e convexo — a ferramenta gera um gradiente linear correspondente à superfície do elemento nesses modos.
Modo inset (pressionado) — para botões que pareçam "pressionados" ao serem clicados.
Controle do ângulo da luz — gire a fonte de luz virtual de 0° a 360°.
CSS pronto para copiar — saída limpa com a declaração de sombra e o fundo da superfície.

 Perguntas frequentes

O que é neumorfismo?

Neumorfismo (também chamado de interface suave) é um estilo visual onde os elementos parecem extrair-se do fundo ou mergulhar nele. É alcançado com duas sombras de caixa de igual desfoque — uma sombra mais clara no lado que enfrenta a luz e outra mais escura no lado oposto — ambas renderizadas contra um fundo da mesma cor que o próprio elemento.
Por que o elemento precisa compartilhar a cor de fundo?

O neumorfismo depende da ilusão de que a forma faz parte da mesma superfície do fundo. Se o elemento usar uma cor diferente, ele deixará de parecer uma extrusão e passará a parecer um tile plano com duas sombras aleatórias, o que quebra o efeito.
As interfaces neumórficas são acessíveis?

Elas têm desvantagens conhecidas em acessibilidade. Como todos os elementos compartilham a mesma cor de fundo, o contraste contra texto e outros elementos de interface é muitas vezes muito baixo, o que pode falhar nos requisitos de contraste da WCAG e confundir usuários com leitores de tela. Use o neumorfismo para superfícies decorativas e mantenha elementos interativos críticos com alto contraste.
Como o ângulo da luz está relacionado aos deslocamentos das sombras?

Os dois deslocamentos das sombras são derivados do ângulo da luz usando trigonometria básica: offsetX = cos(angle) × distance, offsetY = sin(angle) × distance. A sombra oposta é colocada nos deslocamentos negados para que as duas sombras estejam em lados opostos, correspondendo exatamente ao que um fonte real de luz projetaria.