Tendência visual

Efeito de vidro

Glassmorphism

Superfícies translúcidas deixam o fundo aparecer como se estivessem atrás de um vidro fosco.

SEU ESPAÇOClareza,
em camadas.Explorar ↗

Exemplo didático · Representação visual do padrão

Quando usar

Criar camadas em painéis sobre fundos com cor e contraste suficientes.

Cuidados e acessibilidade

Inclua um fundo sólido alternativo e teste contraste sem depender do desfoque.

Como reconhecer

Transparência parcial, desfoque do que está atrás, bordas sutis e sensação de sobreposição.

Não confunda

Vidro fosco é uma técnica; Liquid Glass é uma linguagem específica da Apple.

Exemplo de código

.painel {
  background: rgb(255 255 255 / 85%);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / 60%);
}

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie uma interface no estilo Efeito de vidro (Glassmorphism) em português do Brasil. Superfícies translúcidas deixam o fundo aparecer como se estivessem atrás de um vidro fosco. Contexto de uso: Criar camadas em painéis sobre fundos com cor e contraste suficientes. Estrutura: Transparência parcial, desfoque do que está atrás, bordas sutis e sensação de sobreposição. Características visuais: backdrop-filter: blur(). Requisito: Inclua um fundo sólido alternativo e teste contraste sem depender do desfoque. Considere também: Vidro fosco é uma técnica; Liquid Glass é uma linguagem específica da Apple. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Aprofundar a referência ↗Copiar link deste termo ↗