Glassmorphism CSS
Crie um efeito de vidro fosco (desfoque de fundo) com pré-visualização e CSS pronto.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Um efeito vidro, sem tentativas
Ajuste o desfoque, a transparência, o arredondamento e a borda: o painel de vidro fosco atualiza ao vivo sobre um fundo colorido, e o CSS completo (com prefixo Safari) está pronto a copiar.
-
Ajuste o desfoque
A intensidade do fundo desfocado.
-
Afine o vidro
Transparência, arredondamento, borda, tom.
-
Copie o CSS
Aplique-o ao seu cartão ou barra.
O CSS gerado (definições por defeito)
| Propriedade | Valor |
|---|---|
| background | rgba(255, 255, 255, 0.25) |
| backdrop-filter | blur(8px) |
| border-radius | 16px |
| border | 1px solid rgba(255, 255, 255, 0.18) |
O prefixo -webkit-backdrop-filter é adicionado para Safari. O efeito só é visível sobre um fundo não liso. Tudo é gerado localmente.
Perguntas frequentes
O que é o glassmorphism?
Um estilo de interface que imita vidro fosco: um painel semitransparente que desfoca o que passa por trás, com uma borda clara e fina. Muito usado em cartões, barras e janelas modernas.
Como se obtém o efeito em CSS?
Com backdrop-filter: blur(...) que desfoca o fundo, um preenchimento rgba semitransparente, um border-radius e uma borda rgba clara. A ferramenta gera estas linhas e o prefixo -webkit- para Safari.
Porque é que o fundo deve ser colorido?
O desfoque só é visível se houver algo para desfocar atrás do painel. Num fundo liso o efeito desaparece. Por isso a pré-visualização coloca o vidro sobre um gradiente para o mostrar bem.
É compatível com todos os navegadores?
backdrop-filter é bem suportado nos navegadores recentes (com -webkit- para Safari). Em navegadores muito antigos, preveja um preenchimento de reserva um pouco mais opaco para continuar legível.