Gerador de Glassmorphism

Os dois estilos manipulam blur e sombra para simular profundidade, mas glassmorphism finge transparência sobre um fundo vibrante e neumorphism finge relevo sobre um fundo sólido da mesma cor.

Glassmorphism combina três ingredientes: um fundo semitransparente (`background` com alpha baixo), `backdrop-filter: blur()` para desfocar o que está atrás do elemento, e uma borda clara e sutil para simular a borda de um vidro real, o efeito só funciona visualmente quando existe algo vibrante ou colorido atrás para ser borrado, sobre um fundo liso a transparência praticamente não aparece. Neumorphism usa a técnica oposta: nenhuma transparência, o elemento tem a mesma cor sólida do fundo, e o relevo vem inteiramente de duas sombras opostas, uma clara simulando luz incidindo de um lado e outra escura simulando a sombra projetada do lado oposto. Invertendo as posições dessas sombras com `inset`, o mesmo elemento passa de "elevado" para "afundado" (pressed), útil para simular o estado `:active` de um botão. As cores das sombras não devem ser um cinza genérico, calculá-las a partir da própria cor base (clareando e escurecendo sua luminosidade em HSL) deixa o resultado consistente com o resto da paleta.

Escolha o modo, ajuste os parâmetros e copie o CSS.

1. Alterne entre Glassmorphism e Neumorphism no topo, os dois modos guardam configurações independentes.
2. Escolha um preset como ponto de partida ou ajuste manualmente blur, transparência, cor e borda (glass) ou cor base, distância e intensidade da sombra (neumorphism, com raised/pressed).
3. Copie o CSS pronto, incluindo o prefixo -webkit- necessário para Safari no glassmorphism, ou alterne para Tailwind.

Use esta ferramenta no seu site

<iframe
  src="https://jkit.tools/embed/pt-BR/gerador-glassmorphism"
  width="100%"
  height="600"
  style="border:0"
  loading="lazy"
  title="Gerador de Glassmorphism"
></iframe>

Fontes e referências desta ferramenta

Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.

• backdrop-filterMDN Web Docs, Sintaxe e suporte de navegador do backdrop-filter.
• box-shadowMDN Web Docs, Referência de box-shadow usada nas sombras do neumorphism.
• Understanding SC 1.4.11, Non-text ContrastW3C WAI, Base do critério de contraste citado na página sobre acessibilidade do neumorphism.

Perguntas frequentes

Continue daqui