Português
Crie superfícies CSS de vidro e neomorfismo com pré-visualização ao vivo.
Última atualização
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);*Glassmorphism* e *neumorphism* são dois estilos de superfície que você vê em todo canto do design web moderno. **Vidro** é o visual fosco: um card translúcido que desfoca o que está atrás, geralmente sobre um degradê colorido ou uma foto. **Neumorphism** é o visual de plástico macio: um card que parece sair (ou afundar) na superfície, com sombras claras e escuras do mesmo tom do fundo.
Ambos os efeitos são CSS puro — sem imagens, JS ou bibliotecas. Vidro depende de backdrop-filter: blur() mais um preenchimento translúcido e uma borda fina. Neumorphism é montado a partir de duas box-shadow: uma um pouco mais escura e outra um pouco mais clara que a superfície, deslocadas em direções opostas. A matemática é curta, mas ajustar os valores na mão até tudo encaixar leva tempo. Um gerador pula essa etapa.
Esta ferramenta entrega sliders para todos os parâmetros que importam, um painel de preview com fundo configurável (para o vidro ter o que refratar) e cópia do CSS num clique. Tudo roda no seu navegador — cole o snippet direto na sua folha de estilos.
backdrop-filter é a propriedade que faz o glassmorphism funcionar — ela desfoca e satura o que está *atrás* do elemento, não o próprio elemento.rgba(...) com alfa baixo) e de uma borda clara fina para parecer material fosco real; sem um deles, o efeito quebra.box-shadow, não uma: uma sombra mais escura no canto inferior direito e um brilho mais claro no canto superior esquerdo, ambas com o tom da superfície — não preto/branco puros.Alterne entre **Vidro** e **Neumorphism** no topo. Vidro precisa de um fundo; neumorphism fica em cima de uma cor plana que você controla.
Em vidro, os controles que mandam são *blur* (o quanto o fundo borra), *opacidade do fundo* (o quanto o card é translúcido) e *tint* (um leve viés de cor). Em neumorphism, mandam *distância* (o quanto as sombras se deslocam), *blur* (o quanto são suaves) e *intensidade* (o quanto as sombras diferem da superfície).
Vidro brilha em degradês fortes ou fotos. Neumorphism brilha em tons quase neutros (#e0e5ec é o clássico cinza neumórfico). A ferramenta vem com presets clicáveis.
São três variações: **Saliente** (extrudado), **Plano** (mesmas sombras, sem gradiente) e **Inset** (afundado). Teste as três — a matemática é a mesma, só muda a direção.
Clique em **Copiar** e cole o snippet no seu CSS. A saída é pronta para produção: já vem com -webkit-backdrop-filter para Safari antigo, ordem das propriedades e border-radius para funcionar como uma classe única.
As propriedades em que cada efeito de fato se apoia. Doc completa em MDN — backdrop-filter e box-shadow.
| Estilo | Propriedades-chave | O que ajustar | Notas |
|---|---|---|---|
| Vidro | backdrop-filter, background translúcido, border fina | Blur, saturação, alfa | Sempre adicione -webkit-backdrop-filter para Safari |
| Neumorphism (saliente) | Duas box-shadow + preenchimento com gradiente linear | Distância, blur, intensidade claro/escuro | Cores das sombras devem herdar o tom da superfície, não preto/branco puros |
| Neumorphism (inset) | Duas box-shadow com inset | Mesmos controles do saliente | Inset parece botão pressionado ou input encaixado |
| Combinado / híbrido | Vidro em cima de placa neumórfica | Empilhe com cuidado — filtros demais derrubam o frame rate | Comum em dashboards: card neumórfico com header de vidro |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Glassmorphism clássico. saturate(180%) adiciona um toque de cor viva atrás do blur — sem isso, o vidro fica lavado. Coloque sobre um gradiente hero ou uma foto.
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;As duas sombras fazem o trabalho pesado: uma mais escura embaixo-direita e um brilho mais claro em cima-esquerda. O preenchimento com gradiente cria aquele leve reflexo que o olho lê como "plástico".
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;Adicione inset nas duas sombras e o card parece afundado em vez de elevado — perfeito para inputs e fundos de toggles.
-webkit-backdrop-filter. Safari antigo (e qualquer WebView embarcada) ignora backdrop-filter sem o prefixo e seu vidro vira bloco sólido.-webkit-backdrop-filter além de backdrop-filter. Este gerador emite os dois automaticamente. Sem o prefixo, Safari antigo e WebViews iOS caem para o background opaco e o vidro some.aria-label em botões de ícone — e evite em elementos que *precisem* se destacar (erros, CTAs primários).backdrop-filter é suportado em todos os browsers evergreen e box-shadow é universal. Cuidado com performance — backdrop-filter é uma operação GPU por frame, então mantenha o número de camadas de vidro pequeno em uma mesma tela.