Sobre esta ferramenta
O Gerador de sombras de caixa cria uma sombra com deslocamentos horizontal e vertical, raio de desfoque, raio de expansão, cor, opacidade e inset. Os parâmetros válidos são aplicados imediatamente ao cartão de pré-visualização.
Como utilizar
- Ajuste os deslocamentos horizontal e vertical e o raio de desfoque.
- Defina o raio de expansão, a cor e a opacidade da sombra.
- Ative Sombra interior (inset), se necessário.
- Confira a pré-visualização e copie o CSS ou reponha a sombra inicial.
Exemplos de utilização
- Um deslocamento horizontal negativo move a sombra para a esquerda.
- Um raio de expansão positivo aumenta a sombra; um valor negativo reduz a sua área.
- Ativar inset coloca a sombra no interior da caixa.
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);Funcionamento e explicação do CSS
box-shadow recebe offset-x, offset-y, blur-radius, spread-radius e color, por esta ordem, com inset opcional. Os deslocamentos e a expansão podem ser negativos; o raio de desfoque não. A opacidade controla a mistura da sombra com o fundo.
Utilizações comuns
- Dar profundidade a painéis, caixas de diálogo e botões.
- Comparar sombras suaves e bem definidas.
- Criar sombras interiores para elementos de formulários.
Privacidade
Os dados introduzidos e os resultados são tratados apenas no seu navegador, sem serem enviados ou guardados automaticamente. Copie os resultados que pretender conservar antes de sair da página.
FAQ
Qual é a diferença entre blur e spread?
blur controla a suavidade das margens. spread controla quanto a forma da sombra se expande ou contrai antes do desfoque.
O que é inset?
inset transforma a sombra exterior numa sombra no interior da caixa.
box-shadow aceita valores negativos?
Os deslocamentos horizontal e vertical e a expansão podem ser negativos. O raio de desfoque não pode.
Esta ferramenta permite várias sombras?
Esta página gera uma única sombra. O CSS permite várias camadas de box-shadow separadas por vírgulas.