Gerador de Glassmorfismo CSS

Crie o visual de vidro fosco — ajuste o borrão, transparência, saturação, borda e sombra e, em seguida, copie CSS pronto para a produção.

How to use Glassmorphism Generator

1. Escolha um cenário claro ou escuro, então defina as quantidades de borrão e saturação.
2. Escolha uma cor de preenchimento e ajuste sua opacidade para que o fundo mostra através.
3. Ajustar a opacidade da borda, raio de canto e sombra de gota opcional até que o cartão pareça certo.
4. Clique em Copiar CSS para copiar o conjunto de regras completo, incluindo o -webkit-backdrop-filter backback.

O que é {nome}?

FAQ

Porque é que o meu efeito de vidro parece uma cor plana?

filtro de fundo só borra o conteúdo sentado atrás do elemento. Se não há nada colorido ou ocupado atrás de seu cartão, o borrão não tem nada para trabalhar. Coloque o cartão de vidro sobre uma imagem ou um gradiente vívido para ver o efeito.

Preciso da linha -webkit-backdrop-filter?

Sim, para o Safari. Os navegadores baseados no WebKit, especialmente no iOS, ainda requerem o prefixo -webkit-backdrop-filter. Este gerador inclui-o automaticamente ao lado da propriedade padrão.

O filtro de fundo é amplamente suportado?

Ele funciona em todas as versões atuais do Chrome, Edge, Firefox e Safari. Para navegadores muito antigos, o elemento simplesmente mostra seu fundo semi-transparente sem o borrão, que se degrada graciosamente.

Related tools

• Border Radius Generator
• CSS Gradient Generator
• Box Shadow Generator
• Color Palette Generator