Gerador de Sombras CSS
Construa uma sombra de caixa ou de texto a partir dos deslocamentos, desfoque, espalhamento e cor, e veja de quanto espaço precisa.
Resultados
O que faz esta ferramenta
Uma sombra de caixa são quatro números e uma cor por uma ordem que ninguém decora, e a diferença entre uma sombra que levanta o cartão da página e uma que parece uma nódoa está normalmente num deles. Defina os valores aqui e a linha volta pronta a colar, com a cor transparente escrita como deve ser. Os valores de alcance dizem-lhe de quanto espaço a sombra precisa à volta da caixa, que é o que decide se ela sobrevive dentro de uma grelha apertada.
Fórmula
box-shadow leva deslocamento, desfoque, espalhamento e cor ; text-shadow não tem espalhamento nem inset
Variáveis
| Símbolo | Significado | Unidade |
|---|---|---|
kind | Sombra em | — |
x | Para o lado | px |
y | Para baixo | px |
blur | Desfoque | px |
spread | Espalhamento | px |
color | Cor da sombra | — |
alpha | Quão opaca é | — |
inset | Por dentro em vez de por fora | — |
OUT | O CSS | — |
VA | Só o valor | — |
RE | Até onde chega para fora | px |
RL | Espaço preciso à esquerda | px |
RB | Espaço preciso em baixo | px |
CL | Cor da sombra | — |
Exemplo resolvido
- Sombra embox
- Para o lado0 px
- Para baixo4 px
- Desfoque12 px
- Espalhamento-2 px
- Cor da sombra#17191f
- Quão opaca é0,18
- Por dentro em vez de por forano
- O CSSbox-shadow: 0px 4px 12px -2px rgba(23, 25, 31, 0.18);
- Só o valor0px 4px 12px -2px rgba(23, 25, 31, 0.18)
- Até onde chega para fora4,0 px
- Espaço preciso à esquerda4,0 px
- Espaço preciso em baixo8,0 px
- Cor da sombrargba(23, 25, 31, 0.18)
Perguntas frequentes
Qual é a diferença entre desfoque e espalhamento?
O espalhamento torna a sombra maior antes de ser desfocada, como se a caixa que a projecta tivesse crescido; o desfoque suaviza depois a aresta para fora, a partir de onde essa forma acabar. Um espalhamento negativo é o truque por trás da maior parte das boas sombras: puxa a forma para dentro para que a aresta suave fique debaixo da caixa em vez de espreitar pelos lados, e é isso que faz um cartão parecer levantado em vez de contornado. As sombras de texto não têm espalhamento nenhum.
O que diz o valor do alcance?
Até onde a sombra passa da aresta da caixa, que é o espaço que se tem de deixar à volta. Metade do desfoque mais o espalhamento, ajustado pelo deslocamento de cada lado. Se o alcance por baixo for maior do que a margem debaixo do cartão, a sombra vai ser cortada pelo que vier a seguir, e o sintoma habitual é uma sombra que parece bem sozinha e aparece truncada numa grelha.