Geradores CSS: sombras, raios, filtros e efeitos de vidro sem adivinhar

Passei cerca de quarenta minutos uma vez tentando combinar uma sombra de um arquivo Figma O designer tinha me dado uma cor, um deslocamento X e Y, um borrão e um spread, que é tudo que você precisa, e EU ainda não conseguia fazê-lo parecer certo A sombra no navegador era mais pesada e plana do que a maquete, e EU continuei cutucando o raio de borrão para cima e para baixo como se isso iria corrigi-lo.

Não faria, porque a maquete tinha duas sombras empilhadas Uma escura apertada para contato, uma larga e suave para a luz ambiente A Figma mostrou-os como camadas separadas em um painel Eu tinha desmoronado Uma vez que EU escrevi-os como um par separado por vírgulas a partida foi instantânea.

Essa é a coisa sobre as propriedades CSS neste guia Nenhum deles é complicado Todos eles têm um ou dois comportamentos que não são óbvios a partir da sintaxe, e você pode perder uma tarde para qualquer um deles Este guia são esses comportamentos, escrito.

Cada gerador vinculado aqui é executado em seu navegador, atualiza uma visualização ao vivo enquanto você arrasta e entrega o CSS. Eu os construo em [Toolz.dev] (/e os uso constantemente, principalmente porque ler uma abreviação de quatro valores é mais difícil do que olhar para um retângulo.

tl;dr: usar Sombra Caixa para profundidade, Sombra de texto para brilho e contornos, Raio Fronteira para cantos incluindo os elípticos, Filtros CSS para efeitos de desfoque, brilho e cor, Glassmorphismo para painéis foscos, Neumorfismo para superfícies elevadas macias, Gradientes para fundos e o conversor de unidade css quando você precisa de px in rem. Todos eles executam o lado do cliente com uma visualização ao vivo As duas regras que valem a pena carregar: sombras reais são em camadas e backdrop-filter precisa de algo por trás disso para desfocar.

---

Qual gerador eu preciso?

você quer	Propriedade	ferramenta
Um cartão que levanta da página	box-shadow	Sombra Caixa
Texto brilhante, delineado ou em relevo	text-shadow	Sombra de texto
Cantos arredondados ou em forma de pílula	border-radius	Raio Fronteira
Desfoque, escureça, dessaturar ou matizar um elemento	filter	Filtro CSS
Um painel fosco sobre uma foto	backdrop-filter	Glassmorphismo
Um botão suave que parece pressionado na superfície	em camadas box-shadow	Neumorfismo
Um fundo de transição de cores	linear-gradient	Gradiente
Para transformar 24px em rem	nenhum	conversor de unidade

O resto deste guia é o que cada um faz e onde morde.

Como funciona o box-shadow?

A abreviação é de cinco valores e uma cor:

box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/*         │  │    │    │  └ colour                 */
/*         │  │    │    └ spread: grow or shrink    */
/*         │  │    └ blur: 0 is a hard edge         */
/*         │  └ vertical offset                     */
/*         └ horizontal offset                      */

Os deslocamentos movem a sombra O desfoque suaviza sua borda, espalhando-a para fora em cerca de metade do valor do desfoque em cada direção O espalhamento cresce ou encolhe a sombra antes que o desfoque seja aplicado, e um espalhamento negativo é o truque para uma sombra que fica escondida sob um elemento em vez de halotá-lo.

A parte que as pessoas perdem: as sombras empilham. Uma lista separada por vírgulas é renderizada de volta para frente, a primeira sombra no topo:

box-shadow:
  0 1px 2px rgb(0 0 0 / 0.20),   /* contact: tight, darker */
  0 8px 24px rgb(0 0 0 / 0.12);  /* ambient: wide, lighter */

Esse par é por isso que um designer & #39; s sombra parece melhor do que o seu Uma sombra lê como um adesivo Dois lê como um objeto com peso O Gerador de sombra de caixa permite adicionar camadas e arrastar cada uma separadamente, que é a única maneira sensata de ajustá-las.

inset move a sombra dentro da caixa de borda, que é como você obtém uma entrada que parece recuada, ou a metade interna de uma superfície neumórfica.

Uma nota de desempenho que me mordeu em projetos reais: animação box-shadow força uma repintura em cada quadro Se você quiser que um cartão seja levantado ao passar o mouse, anime transform e desbote um segundo elemento que mantém a sombra maior. O Referência de caixa-sombra MDN documenta a sintaxe na íntegra.

Para que serve a sombra de texto além das sombras de queda?

Mesma ideia, um valor a menos. text-shadow não tem propagação:

text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);

Seus usos interessantes não são sombras.

Esboços. Quatro sombras duras com zero desfoque, uma por diagonal, fingem um traço ao redor do texto. É mais pesado que -webkit-text-stroke mas funciona em todos os lugares e fica fora do glifo, em vez de dividir a diferença:

text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
             1px -1px 0 #000, -1px -1px 0 #000;

Brilho. Deslocamento zero, desfoque grande, cor saturada, repetido duas ou três vezes para aumentar a intensidade.

Legibilidade sobre imagens. Uma única sombra escura suave sob texto branco compra contraste quando o fundo é uma foto que você não controla Não é um substituto para uma tela adequada, e não salvará uma taxa de contraste com falha, mas impede que os descendentes desapareçam em uma área brilhante.

Construa todos os três no Gerador de sombra de texto. Se você estiver perseguindo um requisito de contraste em vez de um efeito, verifique o resultado WCAG com o Verificador de contraste de cores em vez de olhar para ele.

Por que o raio de fronteira assume oito valores?

A maioria das pessoas usa um. A forma completa é de dois grupos de quatro, separados por uma barra:

border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/*             ─────horizontal────   ──────vertical─────  */

Antes da barra: o raio horizontal de cada canto, no sentido horário a partir de cima-esquerda Depois dele: o raio vertical Dê ambos e cada canto se torna uma elipse em vez de um quarto de círculo É assim que você obtém formas de bolha orgânica sem um SVG.

Dois comportamentos que vale a pena conhecer.

As porcentagens são resolvidas em diferentes eixos. Um raio horizontal em % é uma porcentagem do elemento & #39; s largura, a vertical de sua altura. Então border-radius: 50% em um retângulo dá uma elipse, não um retângulo arredondado, o que surpreende as pessoas na primeira vez.

O navegador reduz os raios quando eles se sobrepõem. Se dois raios adjacentes somam mais do que o lado que compartilham, todos os raios são reduzidos proporcionalmente até que se encaixem Você não pode transbordar a forma, e é por isso border-radius: 9999px produz uma pílula de forma confiável.

o Gerador de Raio de Fronteira expõe todos os oito valores com controles deslizantes por canto e emite a abreviação válida mais curta, o que vale a pena ter porque escrever a forma de barra à mão é genuinamente desagradável.

O que os filtros CSS podem fazer e quanto custam?

filter aplica operações gráficas a um elemento e a tudo o que está dentro dele:

filter: blur(4px) brightness(1.1) saturate(1.2);

Funções compõem da esquerda para a direita, e ordem muda o resultado Borrão, em seguida, clareamento não é o mesmo que clareamento, em seguida, borrão.

Função	Faz	Assistir por
blur()	Desfoque gaussiano	Caro em raios grandes; borra bordas para fora
brightness()	Multiplica leveza	Acima de 1 clipes realçados para branco
contrast()	Empurra valores do cinza médio	Esmaga detalhes rapidamente
grayscale()	Remove saturação	Mais barato que um ativo duplicado
sepia()	Mapa de tons quentes	Combinar com hue-rotate() para outras tonalidades
hue-rotate()	Muda a tonalidade por um ângulo	Não preserva a leveza percebida
drop-shadow()	Sombra que segue alfa	Ao contrário box-shadow, segue a forma real

Essa última linha é a que vale a pena lembrar. box-shadow sombreia a caixa de borda, de modo que uma PNG transparente de um logotipo obtém uma sombra retangular. filter: drop-shadow() traça o canal alfa e sombreia o próprio logotipo.

O custo é real Os filtros empurram um elemento para sua própria camada de composição, e blur() em particular é caro em uma grande área Multar em um botão Pense duas vezes em uma sobreposição de página inteira em um telefone low-end. Referência do filtro MDN&#39 lista cada função e seu comportamento de interpolação.

Experimente combinações no Gerador de filtros CSS, que mostra a antevisão e a declaração exacta lado a lado.

Como faço para construir um painel de glassmorphism que funciona?

O vidro fosco é uma propriedade que faz o trabalho:

background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);

backdrop-filter filtra o que é atrás o elemento e não o elemento em si. Três coisas se seguem e representam quase todos os " por que meu vidro parece uma caixa cinza e uma cotação; pergunta.

Precisa de algo por trás disso. Sobre uma cor de fundo plana, um fundo desfocado tem a mesma cor plana. O efeito só existe sobre uma foto, um gradiente ou conteúdo sobreposto.

O fundo deve ser translúcido. Um fundo totalmente opaco esconde completamente o pano de fundo desfocado. Algures entre 10% e 25% de branco é o intervalo habitual.

A saturação é o que a vende. O vidro real concentra a cor. saturate(180%) ao lado do desfoque está a diferença entre vidro fosco e uma mancha.

Adicione a borda da linha do cabelo porque o vidro tem uma borda e verifique o contraste antes de enviar: o texto sobre uma foto desfocada passa ou falha dependendo da foto, e um painel que lê perfeitamente sua imagem de herói pode ser ilegível na próxima.

o Gerador Glassmorphism antevisões sobre uma imagem real, que importa aqui mais do que para qualquer outro efeito neste guia.

Vale a pena usar o neumorfismo?

O neuromorfismo, ou UI suave, faz com que os elementos pareçam extrudados do fundo, em vez de flutuar acima dele Duas sombras, cantos opostos, uma mais clara que a superfície e outra mais escura:

background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
            -8px -8px 16px #ffffff;

Troque-os por um estado pressionado ou use inset em ambos para um visual esculpido.

A técnica tem uma restrição difícil: o elemento e seu fundo devem ser da mesma cor. O efeito são inteiramente as duas sombras, então um botão neumórfico em um fundo diferente para de ler como extrudado e começa a ler como quebrado.

Ele também tem um problema de acessibilidade que vale a pena ser honesto sobre Toda a estética é baixo contraste por construção, e um botão cuja única affordance é uma sombra suave pode falhar WCAG's requisito de contraste não textual para componentes interativos Se você usá-lo, dê aos botões uma borda real ou um estilo de foco que não depende da sombra.

o Gerador de Neumorfismo ambas as cores de sombra derivam da cor da sua superfície, que é a parte complicada de fazer manualmente.

Quando preciso de um conversor de unidades?

Mais frequentemente do que você imagina, porque as ferramentas de design falam px e um bom CSS muitas vezes não.

rem é relativo ao tamanho da fonte raiz, portanto, um layout em escalas rem quando um usuário altera seu navegador & #39; s tamanho de texto padrão. em é relativo ao elemento's tamanho da fonte, o que o torna útil para preenchimento que deve rastrear seu próprio texto e traiçoeiro quando ele é composto por elementos aninhados.

A aritmética é trivial Fazendo-o quarenta vezes enquanto traduz uma especificação é onde os erros se arrastam, especialmente se o tamanho da raiz não é 16 px O conversor de unidade css tira uma raiz configurável e mostra cada unidade de uma só vez.

Para gradientes, o gerador de gradiente abrange linear, radial e cônica, e há uma escrita mais longa no Guia gradiente CSS.

Juntando-os: uma carta, do começo ao fim

As propriedades raramente são usadas sozinhas Aqui está um cartão que usa quatro delas, construído da maneira que EU iria construí-lo.

Comece com a forma e a sombra de repouso:

.card {
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 4px 12px rgb(0 0 0 / 0.08);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

Duas sombras novamente, ambas leves Uma carta de descanso mal deve ser levantada Salve o drama para o estado de pairar.

.card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.08),
    0 12px 28px rgb(0 0 0 / 0.12);
}

o translateY faz a maior parte do trabalho percebido Movimento lê como levantar de forma mais convincente do que uma sombra maior faz, e é barato porque as transformações são compostas em vez de repintadas.

Se o cartão estiver em uma foto em vez de uma página plana, troque o fundo branco por vidro:

.card {
  background: rgb(255 255 255 / 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgb(255 255 255 / 0.25);
}

Note o que mudou e o que não. O raio e as sombras transitam intocados. Apenas o tratamento de superfície difere, que é o modelo mental útil: forma e profundidade são uma decisão, superfície é outra.

E quanto ao suporte e fallbacks do navegador?

A maior parte disso é antiga e segura. box-shadow, text-shadow, border-radius e filter foram apoiados em todos os lugares por anos, e você pode escrevê-los sem um segundo pensamento.

backdrop-filter a exceção vale a pena lidar O suporte é amplo agora, mas é a única propriedade aqui que produz um resultado genuinamente quebrado quando está faltando: um painel com um fundo branco de 15% e sem desfoque é um esfregaço pálido sobre uma foto Guarde-o:

.glass {
  background: rgb(255 255 255 / 0.85);   /* readable fallback */
}

@supports (backdrop-filter: blur(1px)) {
  .glass {
    background: rgb(255 255 255 / 0.15);
    backdrop-filter: blur(12px) saturate(180%);
  }
}

O fallback é um painel principalmente opaco, que não é o efeito, mas é perfeitamente utilizável A versão aprimorada só se aplica onde o navegador pode entregá-lo. MDN's @supports referência abrange a sintaxe e vale a pena alcançá-la a qualquer momento. Uma propriedade tem um modo de falha visualmente quebrado, em vez de um modo meramente mais simples.

Como mantenho os efeitos consistentes em um projeto?

O modo de falha em uma base de código real não é uma sombra ruim São quatorze sombras ligeiramente diferentes, porque todos que precisavam de um cartão escreveram o seu próprio.

Defina-os uma vez como propriedades personalizadas e use os nomes:

:root {
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
               0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
               0 12px 28px rgb(0 0 0 / 0.12);
  --radius: 12px;
}

.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }

Três passos de sombra geralmente são suficientes Se você se encontrar adicionando um quarto, muitas vezes é porque um componente precisa de um diferente elevação em vez de uma sombra diferente, e a resposta é reutilizar uma etapa existente.

Isso também torna o modo escuro tratável As sombras que funcionam em branco são quase invisíveis em uma superfície escura, onde a profundidade geralmente vem de uma borda mais clara ou de um brilho sutil. Redefina os tokens dentro de uma consulta de mídia e todos os componentes seguem:

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
  }
}

Gere cada valor uma vez com as ferramentas acima, cole-o no bloco de token e pare de pensar sobre isso Esse é o ponto principal de ter um gerador: não para escrever CSS você não poderia escrever à mão, mas para parar de gastar atenção em valores que só precisam decidir uma vez.

Onde estes efeitos causam problemas de acessibilidade

Cada propriedade neste guia manipula o contraste, e o contraste é a coisa que os requisitos de acessibilidade são principalmente sobre Quatro armadilhas específicas.

Os componentes interativos precisam de limites visíveis. WCAG 2.2 requer contraste 3:1 para as partes de um controle que o identificam Um botão cuja única borda é uma sombra suave pode falhar isso, que é o problema estrutural com o neumorfismo e a razão pela qual uma borda ou um anel de foco sólido não é opcional lá.

Os painéis de vidro herdam seu problema de contraste de fundo e no 39. Texto em um painel fosco é legível ou não, dependendo da foto por trás dele, e a foto muitas vezes muda Teste contra sua pior imagem, não seu herói Elevar o painel' s opacidade de fundo é geralmente uma correção melhor do que tornar o texto mais ousado.

Os filtros mudam o contraste silenciosamente. brightness() e contrast() aplicado a um recipiente também se aplicam ao texto dentro dele. A filter: brightness(1.15) em um cartão para fazê-lo estourar pode empurrar silenciosamente o texto do corpo sob o limite de 4,5:1 Verifique depois com o Verificador de contraste de cores, não antes.

Não deixe que uma sombra seja o único indicador de estado. Se o hover, o foco e o pressionado diferirem apenas pela profundidade da sombra, os usuários do teclado e qualquer pessoa com baixa visão perdem a distinção. Combine a mudança de sombra com uma transformação, um contorno ou uma mudança de cor.

Nada disso torna os efeitos inutilizáveis Isso os torna coisas para verificar em vez de assumir, o que leva cerca de um minuto por componente com um verificador de contraste aberto.

Essas ferramentas enviam meu trabalho para algum lugar?

Não. Todo gerador aqui é executado inteiramente no navegador Não há etapa de upload e nenhum servidor ida e volta, e é por isso que eles respondem instantaneamente enquanto você arrasta um controle deslizante Essa é a mesma razão pela qual o resto do catálogo funciona offline, coberto no Guia de privacidade de dados.

Erros comuns

• Uma sombra em vez de duas. A diferença mais visível entre uma sombra escrita à mão e uma projetada.
• Animando box-shadow ao pairar. Repinta cada quadro. Animar transform e cross-fade em vez disso.
• backdrop-filter sobre uma cor sólida. Nada a desfocar, então nada acontece.
• Fundo opaco sobre painel de vidro. Esconde o efeito que acabou de escrever.
• Neumorfismo em um fundo incompatível. A ilusão depende de serem idênticos.
• border-radius: 50% esperando um retângulo arredondado. Em um elemento não quadrado você obtém uma elipse.
• Enviando qualquer um destes sem uma verificação de contraste. Sombras e vidros reduzem o contraste e ambos são fáceis de ajustar demais em um bom monitor.

FAQ