Pular para o conteúdo principal
ToolsByUs

Gerador de glassmorphism

Crie um painel de vidro fosco ajustando desfoque, saturação, cor, transparência, borda, cantos e sombra. Copie o CSS ou as classes Tailwind e baixe um PNG da prévia. A exportação inclui `backdrop-filter` com e sem prefixo e pode adicionar uma versão opaca para a preferência de transparência reduzida.

Só local

Predefinições

Escolha uma predefinição para ajustar todos os controles de uma vez e depois refine.

Cor da tonalidade
Realce

CSS

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.28);
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

backdrop-filter desfoca o que está pintado atrás do elemento: a página, uma imagem, outro componente. Coloque uma camada sólida ou um gradiente atrás do vidro na prévia para ver o resultado real.

Classes do Tailwind

rounded-[24px] border-[1px] border-[color:rgb(255_255_255_/_0.25)] bg-[rgb(255_255_255_/_0.12)] backdrop-blur-[20px] backdrop-saturate-[1.80] shadow-[0_8px_32px_rgb(0_0_0_/_0.28)] bg-clip-padding [@media(prefers-reduced-transparency:reduce)]:bg-[rgb(255_255_255_/_1)] [@media(prefers-reduced-transparency:reduce)]:[backdrop-filter:none] [@media(prefers-reduced-transparency:reduce)]:[-webkit-backdrop-filter:none]

A exportação inclui backdrop-filter com e sem prefixo para compatibilidade com navegadores antigos.

Como funciona o Gerador de glassmorphism?

`backdrop-filter` desfoca e altera a saturação do que está atrás do painel. O fundo translúcido adiciona a cor escolhida, e a borda destaca o contorno. Um fundo com detalhes torna o efeito mais visível do que uma superfície uniforme.

A prévia é um SVG com um fundo próprio. O filtro `feGaussianBlur` usa o valor de desfoque como desvio padrão, e uma matriz de cor aplica a saturação. O PNG é renderizado a partir desse mesmo SVG. Na sua página, o CSS age sobre o fundo real atrás do elemento.

A opção de transparência reduzida adiciona `@media (prefers-reduced-transparency: reduce)` ao CSS e ao Tailwind. Quando o navegador informa essa preferência, o painel usa a cor selecionada sem transparência e remove o filtro. O suporte depende do navegador e do sistema operacional.

Confira o contraste tanto na versão translúcida quanto na opaca. Painéis grandes e fundos em movimento podem aumentar o custo de renderização; ajuste o desfoque e teste nos dispositivos em que a página será usada.

Configurações do painel

Desfoque 20px
Saturação 180%
Cor da tonalidade #ffffff
Opacidade da tonalidade 0.12
Raio 24px

CSS gerado

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

Quais opções e casos-limite o Gerador de glassmorphism suporta?

Referência técnica e opções
ParâmetroTipoPadrãoComportamento e casos-limite
blur(Xpx)comprimento20pxDefine o desfoque do fundo atrás do painel. A prévia SVG usa o mesmo valor como desvio padrão do filtro.
saturate(X%)porcentagem180%Ajusta a saturação do fundo. 100% preserva a saturação; valores maiores intensificam as cores.
background-colorrgb com alfabranco a 12%Define a cor e a transparência do painel. Mais opacidade cobre uma parte maior do fundo.
borderespessura e cor1px, branco a 25%Controla a espessura, a cor e a opacidade da borda que delimita o vidro.
background-clippadding-boxativadoLimita a pintura do fundo à área interna da borda para evitar a sobreposição de duas transparências.
Prefixo -webkit-declaração adicionalativadoExporta `-webkit-backdrop-filter` junto de `backdrop-filter` para compatibilidade com navegadores antigos.
prefers-reduced-transparencyconsulta de mídiaativadoTroca o painel pela cor selecionada opaca e desativa os filtros quando o navegador informa a preferência. O suporte varia.

Perguntas frequentes

Como faço um efeito de vidro fosco em CSS?

Combine um fundo semitransparente, `backdrop-filter: blur(20px) saturate(180%)` e uma borda clara. O código gerado inclui também `-webkit-backdrop-filter` para compatibilidade e `background-clip: padding-box` para limitar o fundo à área interna da borda.

Por que `backdrop-filter` não faz nada na minha página?

Confira se há detalhes visíveis atrás do painel e se o fundo dele permite vê-los. Depois verifique o suporte do navegador, as duas declarações de `backdrop-filter` e os ancestrais que podem limitar o efeito. O filtro altera o fundo atrás do elemento.

O glassmorphism é ruim para o desempenho?

O custo varia com o tamanho do painel, o desfoque, o movimento do fundo e o dispositivo. Use o efeito com moderação em áreas grandes ou fixas e teste em celulares. Uma versão opaca é uma alternativa quando a renderização não fica fluida.

Por que existe um bloco `prefers-reduced-transparency`?

Ele permite respeitar a preferência de transparência reduzida informada pelo navegador. Quando essa opção está ativada, a exportação usa a cor selecionada sem transparência e remove os filtros. O suporte depende do navegador e do sistema operacional; confira o contraste nas duas versões.

A pré-visualização do vidro fosco é igual ao CSS que eu copio?

A prévia e o PNG usam um SVG com um fundo de demonstração. O CSS usa os mesmos valores, mas desfoca o conteúdo real atrás do painel na sua página. Por isso, o resultado visual depende também desse fundo.

Por que meu painel de vidro parece lavado ou cinza?

Uma cor neutra, opacidade alta ou um fundo sem detalhes pode enfraquecer o efeito. Ajuste a cor, a transparência e a saturação. O código inclui `background-clip: padding-box` para separar a pintura do fundo da borda.

Equipe ToolsByUs · Como verificamos nossas ferramentas