O neumorfismo é o olhar onde um botão ou cartão parece ser pressionado para fora da própria página, como uma forma moldada a partir de plástico macio Não há borda, nenhuma cor de preenchimento que difere do fundo, apenas um destaque pálido de um lado e uma sombra suave do outro Fotografa lindamente em maquetes de design Em uma interface real é fácil errar de duas maneiras: o efeito desaparece, ou os controles se tornam difíceis de ver.
Ambos os problemas se resumem a uma pequena quantidade de aritmética sobre cores e sombras Este guia explica como o efeito de UI suave é construído a partir de dois box-shadow camadas, como os tons claros e escuros são derivados de uma cor de superfície, o que as formas planas, côncavas, convexas e prensadas mudam e como manter uma interface neumórfica utilizável sob as regras de contraste WCAG Gerador de neumorfismo CSS produz todo o código abaixo com uma visualização ao vivo.
tl;dr: Um elemento neumórfico tem a mesma cor de fundo da página e duas sombras em caixa: uma mais escura deslocada para baixo e para a direita, e uma mais clara deslocada para cima e para a esquerda O uso da palavra-chave inserida em ambas faz com que o elemento pareça pressionado O Gerador de Neumorfismo CSS deriva ambas as cores de sombra da cor da sua superfície, com controles deslizantes para distância (2 a 50 px), desfoque (0 a 100 px), intensidade (2 a 40%) e raio (0 a 80 px), além de formas planas, côncavas, convexas e pressionadas. A superfície de luz padrão dá
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. Essas sombras atingem apenas cerca de 1,5:1 de contraste contra a superfície, bem abaixo das 3:1 que as WCAG pedem nos limites de controle, portanto, os elementos interativos precisam de uma borda visível ou estado de foco. É do lado do cliente, gratuito, sem inscrição.
O que é neumorfismo no design da interface do usuário?
O neuromorfismo, também chamado de interface de usuário suave, é um estilo visual no qual os elementos da interface aparecem extrudados ou pressionados em seu fundo usando sombras claras e escuras emparelhadas em vez de bordas ou preenchimentos contrastantes O nome combina & quot; new" e & quot; skeuomorfism", o estilo mais antigo que imitava materiais físicos O neuromorfismo imita um material, uma única superfície contínua, e depende de uma fonte de luz imaginada no canto superior esquerdo.
O estilo tornou-se popular em sites de vitrine de design por volta de 2020 É bem adequado para painéis decorativos, painéis vistos em boas telas e gráficos únicos de heróis É pouco adequado para formas densas, qualquer coisa usada ao ar livre e qualquer controle que um usuário deve encontrar rapidamente, por razões abordadas na seção de acessibilidade.
Como funciona o efeito neumórfico na CSS?
O efeito precisa de três coisas: uma cor de fundo no elemento que corresponde à página, um raio de borda e duas sombras lançadas em direções opostas O CSS box-shadow a propriedade aceita uma lista separada por vírgulas de sombras, cada uma com um deslocamento de x, um deslocamento de y, um raio de desfoque e uma cor, conforme documentado em Referência de caixa-sombra MDN's e especificado em Antecedentes e Fronteiras do CSS Nível 3.
Aqui está a saída do gerador & #39; s predefinição de luz padrão:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
Leia a lista de sombras da esquerda para a direita A primeira sombra é deslocada 12 pixels para a direita e 12 para baixo, borrada sobre 24 pixels, em um cinza mais escuro que a superfície: que é a sombra no lado longe da luz O segundo é deslocado 12 pixels para a esquerda e 12 para cima em uma cor mais clara que a superfície: o destaque no lado voltado para a luz Porque o elemento & #39; próprio fundo é o mesmo #e0e0e0 como a página, não há borda visível A forma existe apenas como o limite onde as duas sombras se encontram.
Por que o efeito do meu neumorfismo não aparece?
A causa mais comum é uma incompatibilidade entre o elemento & #39; s fundo e o que quer que esteja por trás dele Se a página é branca e o cartão é #e0e0e0, você vê um cartão cinza com uma sombra, não uma extrusão suave Defina o plano de fundo pai & #39; s para a mesma cor que o elemento O painel de visualização gerador & #39; s faz isso automaticamente, e é por isso que parece certo ali e errado quando colado em uma página branca.
A segunda causa é uma cor de destaque que não pode ser vista Numa superfície muito clara o & quot; light" sombra pode já ser branco puro, e numa página branca pura uma sombra branca é invisível É também por isso que o neumorfismo quase nunca é feito #ffffff.
Como são calculadas as cores das sombras claras e escuras?
O gerador desloca cada canal vermelho, verde e azul da cor da superfície na mesma quantidade: a porcentagem de intensidade de 255. a tonalidade clara adiciona essa quantidade e a tonalidade escura a subtrai, e cada canal é preso na faixa de 0 a 255 e arredondado.
Aqui está o cálculo para a predefinição de luz padrão, superfície #e0e0e0 (224, 224, 224) com intensidade de 15%:
- Valor do turno: 15% de 255 = 38,25.
- Sombra escura: 224 - 38,25 = 185,75, arredondado para 186, que é hexagonal
ba. Resultado:#bababa. - Sombra clara: 224 + 38,25 = 262,25, fixada em 255, hexadecimal
ff. Resultado:#ffffff.
O passo 3 mostra um limite que vale a pena conhecer Ligado #e0e0e0 o destaque atinge o branco puro uma vez que a intensidade passa (255 - 224) /255 = 12,2%. Qualquer intensidade acima que torna a sombra mais escura sem tornar o destaque mais brilhante, de modo que o efeito se torna desequilibrado Em superfícies claras, mantenha a intensidade perto desse ponto de fixação ou escolha uma superfície um pouco mais escura para que o destaque tenha espaço.
A mesma regra dá as outras predefinições:
| Predefinição | Superfície | Distância/desfoque | Intensidade | Sombra escura | Sombra clara |
|---|---|---|---|---|---|
| Luz | #e0e0e0 |
12/24px | 15% | #bababa |
#ffffff |
| Cartão | #f0f0f3 |
10/20 px | 12% | #d1d1d4 |
#ffffff |
| Escuro | #2d2f34 |
12/24px | 12% | #0e1015 |
#4c4e53 |
| Pressionado | #e0e0e0 |
12/24px | 15% | #bababa |
#ffffff |
| Convexo | #e0e0e0 |
12/24px | 15% | #bababa |
#ffffff |
Na predefinição Dark, subtrair 30,6 de cada canal de (45, 47, 52) dá (14, 16, 21) ou #0e1015, e adicionando dá (76, 78, 83), ou #4c4e53. Como a mudança é igual entre os canais, a leve tonalidade azul da superfície é transportada para ambos os tons, de modo que uma carta neumórfica escura não se transforma em cinza neutro plano.
O que mudam as quatro formas?
A forma controla o preenchimento de fundo do element' s e se as sombras ficam fora ou dentro dele Distância, desfoque e raio se comportam da mesma forma para todos os quatro.
| Forma | experiência | Sombras | parece |
|---|---|---|---|
| Plano | Cor de superfície sólida | Exterior | Um planalto elevado |
| Convexo | linear-gradient(145deg, light, dark) |
Exterior | Uma cúpula elevada, iluminada do canto superior esquerdo |
| Côncavo | linear-gradient(145deg, dark, light) |
Exterior | Um prato elevado curvando-se para dentro |
| Pressionado | Cor de superfície sólida | ambos inset |
Um vazio empurrado para dentro da página |
A predefinição Pressed produz:
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
Com inset, as sombras são desenhadas dentro da caixa de preenchimento element' s, de modo que a sombra escura aparece ao longo da borda interna superior esquerda e o destaque ao longo do canto inferior direito Isso inverte a sugestão de iluminação e lê como uma depressão É o & quot; active" natural ou & quot; on" estado para uma alternância cujo estado de repouso é plano.
A predefinição Convex usa tons claros e escuros completos à medida que o gradiente para linear-gradient(145deg, #ffffff, #bababa), que é uma curva bastante forte com 15% de intensidade Para uma cúpula mais sutil, abaixe a intensidade; que suaviza o gradiente e as sombras juntas, uma vez que ambas vêm das mesmas duas cores.
Como a distância, o desfoque e o raio interagem?
Os controles deslizantes são independentes, mas a aparência depende de suas proporções.
- Distância (2 a 50 px) define a distância que cada sombra está deslocada em ambos os eixos Ele controla a altura aparente: distâncias maiores fazem o elemento flutuar mais acima da página.
- Borrão (0 a 100 px) define o quão macias são as bordas da sombra Um borrão em torno de duas vezes a distância, como em cada predefinição, dá a aparência travesseiro característica Borrão igual ou abaixo da distância produz sombras de arestas duras que se parecem mais com um recorte.
- Raio (0 a 80 px) arredonda os cantos A interface do usuário suave quase sempre usa arredondamentos generosos; cantos quadrados com sombras suaves parecem um erro de renderização.
- Intensidade (2 a 40%) define a distância que as tonalidades se movem da cor da superfície.
Uma relação de partida prática é o desfoque = 2 x distância, raio = 2 x distância, intensidade perto do ponto de fixação para sua superfície Para elementos pequenos, como um botão de ícone de 40 pixels, a distância da escala até 4 a 6 pixels; um deslocamento de 12 pixels em um botão de 40 pixels torna a sombra maior que o controle.
O neumorfismo é acessível?
Não por padrão. Um controle neumórfico & #39; s borda é definida por sombras que diferem da superfície por apenas alguns por cento em luminância, e que falha o requisito WCAG para o limite visível de componentes interativos.
WCAG 2.2 Critério de Sucesso 1.4.11, Contraste Não Textual, requer que a informação visual necessária para identificar um componente da interface do utilizador, e os seus estados, tenham uma relação de contraste de pelo menos 3:1 em relação às cores adjacentes A relação de contraste utiliza a fórmula de luminância relativa definida em WCAG 2.2. Trabalhando para a predefinição padrão:
| Par | Luminância relativa | Relação de contraste | Encontra 3:1? |
|---|---|---|---|
Sombra escura #bababa vs superfície #e0e0e0 |
0,491 vs 0,745 | Cerca de 1,47:1 | não |
Sombra clara #ffffff vs superfície #e0e0e0 |
1.000 vs 0,745 | Por volta de 1,32:1 | não |
Fronteira #7f7f7f vs superfície #e0e0e0 |
0,212 vs 0,745 | Cerca de 3,03:1 | Apenas |
Fronteira #767676 vs superfície #e0e0e0 |
0,181 vs 0,745 | Cerca de 3,44:1 | Sim, com margem |
Texto #333333 vs superfície #e0e0e0 |
0,033 vs 0,745 | Cerca de 9,6:1 | Sim (também passa 4.5:1 para texto) |
E essas figuras de sombra são o melhor caso O desfoque espalha a cor da sombra, então a maior parte da sombra visível é mais clara do que #bababa. Aumentar a intensidade não ajuda muito em uma superfície clara, porque o destaque já está preso em branco.
Para verificar suas próprias cores, o verificador do contraste da cor calcula a proporção para qualquer par e o guia para verificação de contraste de cores explica a fórmula em detalhes.
Como manter o visual e passar as regras de contraste
Você não tem que abandonar o estilo Você tem que parar de confiar nele para qualquer coisa que um usuário deve perceber.
- Use interface de usuário suave para contêineres, não para controles. Cartões, painéis e poços decorativos podem ser puramente neumórficos O critério 1.4.11 é sobre componentes interativos e gráficos significativos, portanto, um contêiner cujo conteúdo se identifica acarreta muito menos risco do que um botão cuja borda é o único sinal de que existe.
- Dê a cada elemento interativo uma sugestão real. Uma borda de 1 ou 2 pixels em uma cor de 3:1 ou melhor, um ícone contrastante ou um rótulo de texto.
- Tornar o foco óbvio. Adicionar a
:focus-visiblecontorno em uma cor de alto contrasteSombras suaves não são um indicador de foco. - Não sinalize o estado apenas com profundidade. Se carregar significa & quot;on", altere também um ícone, um rótulo ou uma cor.
- Respeite as configurações do usuário. o consulta de mídia prefers-contrast permite adicionar bordas ou eliminar o efeito quando um usuário solicita mais contraste.
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
Como gerar neumorfismo CSS, passo a passo
- abra o gerador neumorfismo e escolha uma predefinição como ponto de partida: Luz, Cartão, Escuro, Prensado ou Convexo.
- Defina a cor da superfície com o seletor de cores para combinar com o fundo em que seu elemento ficará.
- Ajuste a distância e o desfoque para altura e suavidade, depois a intensidade para contraste, assistindo à visualização ao vivo.
- Escolha uma forma: plana, côncava, convexa ou prensada.
- Defina o raio para se adequar ao tamanho do elemento.
- Clique em Copiar CSS e cole as três declarações em sua regra Lembre-se de dar ao pai a mesma cor de fundo.
Como você suporta temas claros e escuros?
Gere um conjunto de valores para cada tema e troque-os com propriedades personalizadas As predefinições Light e Dark acima dão um par de trabalho:
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
O neumorfismo escuro tem o espelho do problema luz-superfície: a sombra se prende em direção ao preto, e o destaque carrega o efeito Verifique o contraste separadamente para cada tema.
Neumorfismo, glassmorfismo e sombras planas comparadas
A interface do usuário suave é uma das várias maneiras de mostrar profundidade e cada uma tem custos diferentes.
| Estilo | CSS central | Sugestão de profundidade | Risco de contraste | bom para |
|---|---|---|---|---|
| Neumorfismo | Dois opostos box-shadow camadas, fundo correspondente |
Extrusão da página | Alto | Painéis decorativos, painéis de vitrine |
| Glassmorphismo | backdrop-filter: blur() e um preenchimento translúcido |
Camada fosca sobre o conteúdo | Médio, depende do que está por trás | Sobreposições, cartas sobre imagens |
| Elevação de estilo material | Um ou dois para baixo box-shadow camadas |
Cartão flutuando acima da página | Baixo | Interfaces gerais |
| Plano com bordas | border e preencha cores |
nenhum | Mais baixo | Formulários, dados densos, acessibilidade-primeiro trabalho |
o gerador glassmorphism constrói o estilo de vidro fosco e o guia gerador sombra caixa abrange sombras de elevação simples e em camadas Para texto brilhante ou em relevo em vez de caixas, o gerador sombra texto aplica uma ideia semelhante ao tipo Todos eles estão listados no Hub de ferramentas CSS.
O gerador é privado?
Sim. a visualização e o CSS são gerados no seu navegador com JavaScript, nada é carregado ou armazenado e a página continua funcionando offline depois de carregada Copiar o CSS conta para um limite de uso diário, e uma mensagem aparece se esse limite for atingido.
