Gerador de box-shadow

O que é um gerador de box-shadow

Dá-lhe controlos para os quatro números que uma sombra CSS aceita — deslocamento horizontal, deslocamento vertical, raio de desfocagem e expansão —, mais uma cor, e escreve a declaração. Acrescente mais sombras e elas empilham-se: é assim que se constroem as sombras suaves e em camadas das interfaces actuais.

Este diz-lhe ainda o que o raio de desfocagem significa, porque não significa o que o nome sugere. O painel por baixo da pré-visualização converte a sua desfocagem no número que o motor está realmente a usar, e na distância a que a sua sombra ainda vai pintar.

Tudo corre no seu navegador. Nada é enviado e não há conta.

Como usar o gerador

1. Defina os quatro números. O deslocamento move a sombra, a desfocagem suaviza-lhe o limite e a expansão aumenta ou encolhe a forma antes de qualquer desfocagem. Uma expansão negativa é como se consegue uma sombra justa debaixo de um cartão sem halo à volta.
2. Acrescente camadas se quiser profundidade. A profundidade a sério costuma vir de duas ou três sombras com desfocagens diferentes, e não de uma grande. Note que as sombras são pintadas com a primeira por cima, ao contrário de como a lista se lê.
3. Leia o painel e copie. Mostra o desvio-padrão gaussiano a que a sua desfocagem corresponde, até onde a sombra ainda pinta, e o valor de filter: blur() que ficaria igual. O bloco de CSS está pronto a colar.

Um raio de desfocagem de 20px não são 20px de desfocagem

A especificação do CSS é concreta quanto a isto, e quase nenhum gerador o repete. Na secção sobre desfocar os limites da sombra, o CSS Backgrounds and Borders Level 3 diz que a sombra desenhada deve aproximar — com cada píxel dentro de 5% do seu valor exacto — a imagem que se obteria aplicando uma desfocagem gaussiana cujo desvio-padrão é metade do raio de desfocagem.

Portanto `box-shadow: 0 0 20px` é uma gaussiana com desvio-padrão de 10. O raio de desfocagem são dois sigmas. E não é um pormenor se também usar filtros, porque `filter: blur(20px)` recebe directamente um desvio-padrão: o mesmo número, a mesma palavra e o dobro da suavização. Para reproduzir um `filter: blur(N)` com uma sombra precisa de um raio de 2N, e esta ferramenta verifica-o como identidade exacta a cada distância, não como aproximação.

Da matemática saem duas consequências úteis. Desfocar um limite recto com uma gaussiana dá uma função erro, e uma função erro passa exactamente por metade no degrau. Por isso uma sombra desfocada fica exactamente a 50% do alfa da sua cor ao longo do contorno que desenhou, e não em plena força. Metade da desfocagem cai dentro da forma e metade fora, e é por isso que aumentar a desfocagem nunca torna uma sombra maior: torna o limite mais difuso e, no limite, mais claro. Aumentar uma sombra é o que a expansão faz, e as duas coisas confundem-se constantemente.

A segunda consequência é a que provoca erros. Uma gaussiana tem caudas, por isso uma sombra não pára no seu raio de desfocagem. Calcular onde o alfa desce abaixo de um passo de 8 bits — o ponto a partir do qual nada mais pode ser desenhado — dá cerca de 1,33 vezes o raio, em todas as direcções e a qualquer tamanho. Uma desfocagem de 20px ainda pinta alguma coisa a 27px. Se um contentor tem overflow hidden e a sua sombra parece cortada apesar de os números parecerem caber, é essa a proporção responsável.

Nada disto faz uma sombra parecer errada; torna-a previsível. A razão para conhecer o desvio-padrão é que é o número em que qualquer outra desfocagem à volta é expressa — filtros SVG, sombras de canvas, ferramentas de desenho — e o box-shadow é a excepção por o duplicar.

Limitações assumidas

A pré-visualização é um elemento real com um box-shadow real, por isso o que vê é o seu próprio navegador a desenhá-lo. Os valores do painel são calculados a partir da especificação, não medidos nos píxeis: a especificação permite 5% por píxel, pelo que um navegador pode afastar-se um pouco da gaussiana ideal, e alguns fazem-no, sobretudo em raios muito grandes onde aproximam com desfocagens de caixa repetidas.

O painel de análise descreve a primeira sombra da lista. Com várias camadas a matemática aplica-se a cada uma em separado e depois compõem-se, o que um único número não consegue resumir com honestidade, por isso a ferramenta não finge que sim.

O alcance é calculado para um limite recto. Num canto a sombra é a desfocagem de uma forma curva, pelo que a queda é ligeiramente diferente, e numa sombra interior toda a geometria se inverte. O valor do limite recto é o adequado para a pergunta prática — de quanto espaço isto precisa — e não é exacto nos cantos.

A linguagem de desenho deste site proíbe sombras por completo, e isso não mudou: o quadrado da pré-visualização é a única sombra desta página e o resto é plano de propósito. A regra vale para as nossas páginas, não para uma ferramenta feita para as dos outros. Vale a pena dizer que uma sombra costuma ser o instrumento errado de qualquer forma: uma linha fina de contorno ou um fundo com tonalidade transmitem a mesma hierarquia sem o custo de desenho nem o halo.

O motor leva 40 verificações. Como o JavaScript não tem função erro, foi preciso escrever uma, e é confrontada com a biblioteca padrão do Python em 1207 pontos com um erro máximo abaixo de 1e-7, a par de um controlo que confirma que uma função errada de aspecto plausível não passa essa fasquia. O arnês corre ele próprio o oráculo de Python em vez de pedir um passo prévio, depois de a primeira versão ter saltado essa comparação em silêncio no Windows porque o Git Bash e o Node não concordam sobre onde fica /tmp.

Porque é gratuito

Quatro controlos e uma função erro são trabalho que a sua própria máquina faz num instante. Nada é enviado, não há conta e não há nada para marcar de água.

Se quiser cantos em vez de sombras, o gerador de border-radius deste site está ao lado, e tem uma história parecida sobre uma regra da especificação que ninguém mostra.