Que propriedade CSS cria o efeito de vidro?

A propriedade primária é `backdrop-filter: blur()`, que aplica o desfoque à área atrás do elemento em vez de ao próprio elemento. Isto é geralmente combinado com uma `background-color` semi-transparente usando valores RGBA ou HSLA.

Funciona em todos os navegadores?

A maioria dos navegadores modernos suporta `backdrop-filter`. O Firefox ocasionalmente requer que a flag `layout.css.backdrop-filter.enabled` seja definida como verdadeira em versões mais antigas, por isso é recomendável incluir uma cor de fundo de fallback.

Porque é que o desfoque não aparece no meu projeto?

Certifique-se de que o elemento tem um fundo transparente ou semi-transparente. Se o fundo for totalmente opaco, o efeito de desfoque que ocorre atrás do elemento ficará oculto.

Posso usar isto para componentes de UI de produção?

Sim. Glassmorphism é um padrão de design comum para cartões, barras de navegação e modais. O CSS gerado é compatível com os padrões e pronto para uso em qualquer folha de estilo.

Cor e Design

Gerador de Glassmorphism

Frosted-glass UI cards with backdrop-filter.

Runs in your browser

Nota do editor

Understanding · Frosted glass, in three CSS properties.

Este capítulo aprofundado está disponível apenas em inglês no momento. A ferramenta de conversão acima funciona no seu idioma; o artigo explicativo longo ainda não foi traduzido.

Perguntas frequentes

Quick answers.

›Which CSS property creates the glass effect?

The primary property is `backdrop-filter: blur()`, which applies the blur to the area behind the element rather than the element itself. This is usually paired with a semi-transparent `background-color` using RGBA or HSLA values.

›Does this work in all browsers?

Most modern browsers support `backdrop-filter`. Firefox occasionally requires the `layout.css.backdrop-filter.enabled` flag to be set to true in older versions, so including a fallback background colour is recommended.

›Why does the blur not appear in my project?

Ensure the element has a transparent or semi-transparent background. If the background is fully opaque, the blur effect happening behind the element will be hidden from view.

›Can I use this for production UI components?

Yes. Glassmorphism is a common design pattern for cards, navigation bars, and modals. The generated CSS is standard-compliant and ready for use in any stylesheet.

As pessoas também pesquisam por

Ferramentas relacionadas

More in this room.

Ver tudo em Cor e Design