EspañolGerador de glassmorphism (vidro fosco)
Ajuste o desfoque, a transparência e a borda até o cartão parecer vidro sobre o fundo. Troque o fundo para testar e copie o CSS.
Como usarEfeito de vidro fosco
Disponível em: 
Gerador de glassmorphism (vidro fosco): para que serve
Ajuste o desfoque, a transparência, a saturação, a cor do vidro, a borda e os cantos. A prévia mostra o cartão sobre um degradê com formas, uma paisagem, um fundo escuro ou a sua própria foto.
O CSS sai com backdrop-filter e o prefixo -webkit- para o Safari, mais uma cor de reserva mais opaca para navegadores que não suportam o desfoque.
Como usar
- Ajuste desfoque, transparência e borda.
- Troque o fundo da prévia ou use a sua foto.
- Copie o CSS e aplique a classe vidro.
Quando usar
- Cabeçalhos e menus com fundo de vidro.
- Cartões de destaque sobre fotos.
- Interfaces com visual moderno.
Perguntas frequentes
Funciona em todos os navegadores?
O backdrop-filter funciona nos navegadores atuais (Chrome, Edge, Safari e Firefox). O código inclui o prefixo -webkit- para o Safari e uma cor de fundo de reserva, mais opaca, para quando o desfoque não for suportado.
Por que o vidro não aparece?
O efeito só aparece se houver algo colorido ou com detalhes atrás do cartão: foto, degradê ou formas. Sobre um fundo branco liso, o vidro fosco parece só um cartão branco.
Pesa no desempenho?
Um pouco: o navegador precisa desfocar o que está atrás. Use em poucos elementos (cabeçalho, cartões de destaque) e evite em listas longas ou em celulares mais simples.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.