CSS-Neumorphismus-Generator
Ajuste a cor de fundo, a distância, o desfoque e a intensidade para compor um efeito neumorphism (sombra suave que imita relevo) e obtenha o código CSS correspondente, com pré-visualização ao vivo. O cálculo é feito inteiramente no seu navegador.
So funktioniert es
O neumorphism dá a ilusão de que um elemento está levemente em relevo ou afundado no fundo, graças a duas sombras opostas da mesma cor do plano de fundo: uma mais clara no canto superior esquerdo, outra mais escura no canto inferior direito. Esta ferramenta calcula esses dois tons a partir da cor de fundo escolhida e monta a propriedade box-shadow correspondente em tempo real.
Por que as duas sombras precisam ter a mesma cor de base?
O efeito neumorphism se baseia em uma variação de luminosidade de uma única cor (o fundo), e não em cores contrastantes como numa sombra clássica; é essa proximidade de tom que dá a impressão suave e "moldada" característica do estilo, em vez de uma sombra projetada tradicional.
Bei welchen Elementen setze ich diesen Effekt ein?
O neumorphism funciona bem em botões, cartões, campos de formulário ou ícones sobre um fundo liso, claro ou escuro; já é difícil de ler sobre um fundo com imagem ou gradiente e às vezes causa problemas de acessibilidade por falta de contraste, algo a testar antes de usar em larga escala.
Nenhum dado é enviado a um servidor: a composição da sombra é feita inteiramente no seu navegador.