Gerador de neumorfismo CSS

O Gerador de Neumorfismo CSS constrói elementos de interface do usuário suave - o estilo em que uma forma parece suavemente extrudada ou pressionada no fundo usando sombras claras e escuras emparelhadas Você define a cor da superfície, distância da sombra, desfoque, intensidade de contraste, raio e forma do canto, assiste a uma visualização ao vivo e copia o CSS exato.

O Neumorfismo funciona colocando duas sombras em um elemento que compartilha seu fundo com a página: uma sombra mais clara na parte superior esquerda e uma mais escura na parte inferior direita. Fazer com que as duas cores e offsets de sombra pareçam convincentemente suaves é um toque delicado manualmente. Esta ferramenta deriva os tons claros e escuros da cor da sua superfície automaticamente, para que o efeito sempre pareça equilibrado.

Tudo é executado no seu navegador. Escolha uma predefinição, ajuste os controles deslizantes, alterne entre as formas plana, côncava, convexa e prensada e copie o CSS. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.

Neumorfismo vale a pena usar com olhos claros sobre sua principal fraqueza, que é a acessibilidade O estilo funciona colocando uma sombra clara e uma sombra escura em uma superfície quase da mesma cor que seu fundo, então a borda de um controle é definida por uma diferença de alguns por cento em luminância Que lê como elegante para alguns espectadores e como invisível para qualquer pessoa com sensibilidade ao contraste reduzida, em uma tela fraca ou ao ar livre Ele falha WCAG 1.4.11, que pede uma proporção de 3:1 no limite de um componente interativo O compromisso usual é manter o estilo para superfícies decorativas e dar aos elementos genuinamente interativos uma borda real ou um estado de foco claro As cores das sombras são derivadas da cor da superfície aqui, de modo que uma superfície escura produz um par invertido corretamente em vez de um cinza.