Design UI

Efeito Visual Moderno Liquid Glass

Crie o efeito de vidro realista com CSS para sites modernos, inspirado no novo visual do iOS

Visual Fluido

Efeito no iOS Liquid Glass

Novo visual da Apple. Um design mais limpo, moderno e realista usando camadas e blur avançado—e o melhor, você pode replicar com CSS.

100%

CSS Puro

Todos

Navegadores Modernos

glass-effect.css

.glass { backdrop-filter: blur(20px) saturate(180%); background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; }

Como funciona o efeito Liquid Glass

Não é só desfoque. É uma combinação de camadas, transparência e contraste para gerar profundidade e realismo visual.

Camadas Visuais

Integrar camadas sem opacidade total deixa o fundo visível e ajuda a criar o efeito realista de profundidade.

Mais que Blur

Usar apenas blur gera um efeito superficial. A chave está na combinação com transparência, brilho e bordas suaves.

Aplicações Versáteis

Use o efeito em qualquer stack web

CSS Puro

Sem bibliotecas externas. Totalmente replicável com propriedades atuais de CSS.

Compatível com Tudo

Adicione em projetos feitos com código puro, WordPress, Framer e outros.

Resultado Realista

Estética refinada que imita materiais translúcidos e objetos sólidos.

Trecho básico de Código CSS

Simples, prático e pronto para testar no seu site

/* efeito vidro com CSS moderno */

.glass {

background-color: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(20px) saturate(180%);

-webkit-backdrop-filter: blur(20px) saturate(180%);

border: 1px solid rgba(255, 255, 255, 0.25);

border-radius: 16px;

}

Pronto para aplicar o efeito?

Aprenda a construir o efeito vidro com CSS independente da plataforma