Painéis de vidro fosco estão por toda parte no design da interface: a barra lateral translúcida em um sistema operacional de desktop, o cabeçalho desfocado que permite a exibição de uma foto, o cartão que flutua sobre um gradiente em uma página de destino O visual é simples de descrever e estranhamente fácil de errar em CSS Um painel acaba plano e cinza, ou o desfoque não faz nada, ou o texto branco nele é ilegível sobre metade do fundo.
Este guia explica o CSS que faz o efeito funcionar, por que cada uma das cinco propriedades está lá, como manter o texto legível quando o plano de fundo continua mudando, o que custa na renderização de desempenho e como recuar graciosamente Os exemplos trabalhados usam a saída do Gerador CSS do glassmorphism Toolz, que constrói o código a partir de controles deslizantes e uma visualização ao vivo.
tl;dr: Glassmorphism é um estilo de UI onde um painel se parece com vidro fosco: um fundo semitransparente plus
backdrop-filter: blur()então o conteúdo por trás dele mostra através suavemente, geralmente terminado com uma borda translúcida de 1 px e uma sombra suave Ele precisa de duas coisas para ser visível: um preenchimento que é parcialmente transparente e algo colorido atrás do painel O contraste do texto muda com o que passa por baixo, então teste-o contra as partes mais brilhantes e escuras do fundo real O Gerador de glassmorfismo CSS escreve o bloco completo, incluindo o-webkit-prefixo, lado do cliente, gratuito, sem inscrição.
O que é o Glassmorphism no CSS?
Glassmorphism é um estilo visual que imita vidro fosco Um elemento obtém uma cor de fundo com baixa opacidade e um filtro de fundo que desfoca os pixels atrás dele, de modo que formas e cores por baixo parecem suavizadas através da superfície Uma borda de luz fina sugere a borda de vidro, e uma sombra suave levanta o painel da página.
A propriedade chave é backdrop-filter, definido no W3C Módulo de efeitos de filtro nível 2. Ele assume as mesmas funções de filtro que filter (blur(), saturate(), brightness() e o resto) mas aplica-os à área atrás do elemento em vez do elemento em si Essa diferença é o que torna o efeito possível.
Aqui está o bloco completo que o gerador produz para sua predefinição Frosted:
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
Seis linhas, e cada uma tem um emprego.
filtro vs filtro de fundo: qual é a diferença?
filter altera a forma como o elemento em si é desenhado, incluindo seu texto e filhos. backdrop-filter muda o que mostra através do elemento por trás, e deixa o elemento & #39; s próprio conteúdo afiado.
| Propriedade | O que isso afeta | Resultado do exemplo de desfoque | Uso típico |
|---|---|---|---|
filter: blur(10px) |
O elemento e todos os seus filhos | O cartão e seu texto estão borrados | Efeitos de imagem, estados desativados, espaços reservados de carregamento |
backdrop-filter: blur(10px) |
Tudo o que está pintado atrás do elemento | O cartão permanece nítido, o fundo visto através dele fica desfocado | Painéis de vidro fosco, cabeçalhos desfocados, sobreposições modais |
Se desfocar um cartão com filter e me pergunto por que o título é ilegível, você usou a propriedade errada. O Gerador filtro CSS cobre o filter lado do par.
Como funciona cada linha do CSS de vidro?
O fundo é a tonalidade e seu canal alfa é o número mais importante do bloco. rgba(255, 255, 255, 0.2) é branco com 20% de opacidade Em um alfa de 1 o painel é sólido e nada aparece através, então o borrão do pano de fundo é invisível Em um alfa de 0 não há superfície alguma A maioria dos vidros utilizáveis fica entre 0,1 e 0,4.
No gerador este é o controle deslizante Transparência, e a nomeação precisa de uma nota: o controle deslizante define a opacidade do preenchimento, de modo que um valor de Transparência mais alto torna o painel mais sólido Transparência 20% escreve um alfa de 0,2, e 40% escreve 0,4.
O filtro de fundo faz a geada. blur(10px) define o raio do desfoque aplicado ao que fica atrás. saturate(120%) aumenta a cor desse pano de fundo desfocado em 20%, o que neutraliza a aparência cinza e desbotada que o desfoque mais uma tonalidade branca tende a produzir O controle deslizante Blur do gerador & #39; s é executado de 0 a 40 px e Saturação de 100% a 200%.
A cópia prefixada existe porque as versões mais antigas do Safari só entendem -webkit-backdrop-filter. Escrever ambas as linhas com valores idênticos não custa nada e cobre essas versões.
O raio da fronteira arredonda os cantos, 0 a 50 px no gerador O desfoque é cortado para a forma arredondada.
A fronteira é uma linha de 1 px de branco com 18% de opacidade Ele chama a atenção como um destaque na borda de vidro e importa mais em fundos mais escuros, onde o limite do painel se dissolveria de outra forma A caixa de seleção gerator' s Border liga ou desliga; a cor e a largura são fixas.
A sombra 0 8px 32px rgba(0, 0, 0, 0.12) é uma sombra larga e fraca que separa o painel da página. Se você quiser ajustá-lo, o guia sombra caixa explica deslocamento, desfoque e propagação em profundidade.
O que as predefinições do gerador produzem?
As predefinições são pontos de partida em vez de projetos acabados Todos os cinco usam um raio de 16 px, e todos, exceto Subtle, incluem a borda.
| Predefinição | experiência | Filtro backdrop | Fronteira | Melhor sobre |
|---|---|---|---|---|
| Gelado | rgba(255, 255, 255, 0.2) |
blur(10px) saturate(120%) |
Em | Gradientes coloridos e fotos |
| Luz | rgba(255, 255, 255, 0.35) |
blur(6px) saturate(130%) |
Em | Imagens ocupadas onde o texto precisa de mais suporte |
| Escuro | rgba(15, 23, 42, 0.25) |
blur(12px) saturate(120%) |
Em | Fotos claras, texto branco |
| Vibrante | rgba(139, 92, 246, 0.15) |
blur(16px) saturate(180%) |
Em | Seções de heróis escuros ou saturados |
| Sutil | rgba(255, 255, 255, 0.12) |
blur(4px) saturate(120%) |
Desligado | Pequenos chips e crachás |
O gerador carrega com Frosted selecionado Clique em uma predefinição, ajuste os controles deslizantes e a cor da tonalidade e o bloco de código é atualizado à medida que você arrasta.
Por que meu filtro de pano de fundo não funciona?
Quando o borrão parece não fazer nada, uma delas é quase sempre a causa.
- O fundo é opaco. Um sólido
background: #fffou um alfa de 1 esconde o pano de fundo completamente Abaixe o alfa. - Não há nada por trás disso para desfocar. Sobre uma página plana de uma única cor, uma cor plana borrada parece idêntica à cor plana O vidro precisa de um gradiente, uma foto ou formas por trás dele A visualização do gerador & #39; s deliberadamente senta-se sobre um gradiente com círculos coloridos por esse motivo; o Guia gradiente CSS é uma boa fonte de fundos que mostram bem o efeito.
- Falta o prefixo. Versões mais antigas do Safari ignoram a propriedade sem prefixo.
- Um ancestral limita o que o filtro pode ver. Na especificação atual de efeitos de filtro, algumas propriedades em um ancestral, como a sua própria
filter, umopacityabaixo de 1 ou outrobackdrop-filter, inicie uma nova raiz de pano de fundo, e o desfoque só amostra conteúdo dentro dessa raiz Se o vidro senta dentro de um invólucro com um destes, mova o efeito ou a propriedade. - O painel não tem tamanho ou é totalmente transparente de outra forma. Um elemento de altura zero ou
opacity: 0no painel esconde o efeito junto com o painel.
Como você mantém o texto legível em um painel de vidro?
O vidro legível leva mais trabalho do que qualquer outra parte do estilo, porque a cor do texto é fixa enquanto o fundo sob o painel não é O mínimo de contraste WCAG 2.2 pede uma proporção de pelo menos 4,5:1 para texto normal e 3:1 para texto grande Em um painel translúcido essa proporção depende do que está por trás de cada parte do painel naquele momento.
Um exemplo trabalhado faz este concreto A razão de contraste é computada a partir da luminância relativa das duas cores, (L1 + 0,05) /(L2 + 0,05).Um preenchimento de vidro compõe sobre o fundo: cada canal torna-se alfa vezes o preenchimento mais (1 menos alfa) vezes o pano de fundo O desfoque calcula a média dos pixels vizinhos, mas deixa uma região & #39; s cor média aproximadamente onde estava, então sobre uma grande área de uma cor o composto é uma estimativa justa.
| Preencher | Cor backdrop | Cor composta | Contraste com texto branco |
|---|---|---|---|
| Frostado, branco a 0,2 | Azul #60A5FA |
sobre rgb(128, 183, 251) |
cerca de 2,1:1 |
| Frostado, branco a 0,2 | Amarelo #FBBF24 |
sobre rgb(252, 204, 80) |
cerca de 1,5:1 |
Escuro, rgba(15, 23, 42, 0.25) |
Azul #60A5FA |
sobre rgb(76, 130, 198) |
cerca de 4,0:1 |
Pegue a primeira linha. Vermelho é 0,2 x 255 + 0,8 x 96 = 127,8, verde é 0,2 x 255 + 0,8 x 165 = 183, azul é 0,2 x 255 + 0,8 x 250 = 251. Essa luminância relativa da cor e #39; funciona perto de 0,454 e branco e #39; s é 1, então a proporção é 1,05 /0,504, cerca de 2,1:1. O mesmo painel sobre a parte amarela do fundo cai para cerca de 1,5:1. Nenhum deles passa para o corpo do texto, e a predefinição escura sobre o azul atinge cerca de 4,0:1: suficiente para texto grande, ainda aquém de 4,5:1 para texto pequeno.
As correções práticas, por ordem de eficácia:
- Levante o alfa de preenchimento. Mover a transparência de 20% para 40% esconde mais o cenário e estreita o alcance em que o contraste oscila.
- Escureça a tonalidade para texto leve, ou iluminá-lo para o texto escuro Vidro escuro com texto branco se sustenta sobre muito mais fundos do que vidro branco com texto branco.
- Aumentar o borrão. Ele suaviza detalhes de alto contraste, de modo que uma fina linha branca atrás de uma letra não o corta.
- Adicionar uma sombra de texto como último recurso para títulos. O gerador sombra texto faz um macio rapidamente.
- Teste nos extremos. Verifique o contraste nas regiões mais brilhantes e escuras onde o painel pode ficar, com o verificador do contraste da cor, não em um local conveniente.
O gerador & #39; s copiado CSS cobre apenas a superfície de vidro O texto branco em sua visualização não faz parte da saída, então defina color em seu elemento você mesmo.
O filtro de fundo prejudica o desempenho?
Pode. Um borrão de pano de fundo força o navegador a ler de volta os pixels atrás do elemento e executar um borrão sobre eles toda vez que essa área muda Em um cartão estático que é barato Em uma grande área, durante a rolagem, ou quando o conteúdo anima atrás do painel, é um dos efeitos mais caros para composto, e telefones de menor potência mostram primeiro como quadros descartados.
Diretrizes que o mantêm sob controle:
- Mantenha os painéis de vidro modestos em tamanho Uma sobreposição fosca de janela completa custa muito mais do que um cartão.
- Prefira raios de desfoque menores O custo cresce com o raio e, além de cerca de 20 px, a diferença visual é pequena.
- Evite animar o próprio valor de desfoque. Animar
opacityoutransformdo painel em vez disso. - Tenha cuidado com cabeçalhos adesivos sobre o conteúdo de rolagem longa, que re-borrar em cada quadro de rolagem Teste em um telefone de gama média real.
Como você adiciona um fallback para navegadores ou usuários que precisam de um?
Versões atuais do Chrome, Edge, Firefox e Safari são compatíveis backdrop-filter. Navegadores muito antigos ignoram e mostram o preenchimento semitransparente sem o desfoque, que em alfa baixo pode deixar o texto em um fundo ocupado Duas pequenas adições fazem o efeito degradar bem Você pode verificar a tabela de suporte atual em MDN's página de filtro de cenário.
.glass {
/* Fallback: a more solid fill for browsers without backdrop-filter */
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
}
@media (prefers-reduced-transparency: reduce) {
.glass {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
o @supports o bloco aplica apenas a versão translúcida onde existe o desfoque. O prefers-reduced-transparency recurso de mídia, definido em Consultas de mídia Nível 5, permite que os usuários que solicitaram menos transparência ao seu sistema operacional obtenham um painel sólido. O suporte do navegador para esse recurso de mídia ainda é parcial, portanto, trate-o como uma melhoria quando disponível, em vez da única salvaguarda.
Glassmorphism vs neumorfismo vs design plano
Glassmorphism é um dos vários estilos de superfície, e cada um tem um custo diferente.
| Estilo | Como a superfície é feita | CSS principal | força | Risco principal |
|---|---|---|---|---|
| Glassmorphismo | Preenchimento translúcido mais desfoque de cenário | background com alfa, backdrop-filter |
Profundidade e contexto do fundo | O contraste varia, o desfoque custa o desempenho |
| Neumorfismo | Mesma cor da página, levantada ou pressionada por sombras emparelhadas | Dois box-shadow camadas |
Controles suaves e táteis | Muito baixo contraste entre controle e página |
| Plano | Preenchimentos sólidos, sem profundidade | background |
Rápido e previsível | Pode parecer simples |
| Elevação de estilo material | Preenchimento sólido com níveis de profundidade de sombra | box-shadow |
Limpar hierarquia | Menos atmosférico |
Se o visual macio e extrudado estiver mais próximo do que você deseja, o gerador neumorfismo constrói as sombras emparelhadas Muitas interfaces misturam estilos: vidro para uma barra de navegação flutuante sobre uma imagem de herói, placas planas para conteúdo denso abaixo dela.
Como construir um cartão de vidro, começar a terminar
- abra o gerador CSS vidro fosco e escolha a predefinição mais próxima do seu plano de fundo: Escuro para fotos leves, Frosted ou Luz para gradientes coloridos.
- Defina o Blur alto o suficiente para que os detalhes do fundo não concorram com o texto, geralmente de 8 a 16 px.
- Defina Transparência Comece em 20% e aumente-o até que seu texto passe contraste sobre a parte mais dura do fundo.
- Escolha uma tonalidade com o seletor de cores Uma tonalidade desenhada a partir do fundo' a própria paleta parece mais natural do que o branco puro.
- Ajuste o Raio para combinar com o resto dos seus componentes, e mantenha o Border ligado para fundos escuros.
- Clique em Copiar CSS e cole o bloco na sua classe de cartão Adicionar
colore se acolchoando. - Enrole o bloco no
@supportsfallback acima se você suporta navegadores mais antigos.
Tudo no gerador é executado em seu navegador, então nada é carregado e ele continua funcionando offline após o carregamento da página Para ferramentas de superfície e efeito relacionadas, o Hub de ferramentas CSS lista gradientes, sombras, filtros e transições em um só lugar.
