Ferramentas gratuitas
Português
Gerador de sombras CSS
Gerador de sombras CSS — Escolha tamanhos ou cores e confira o código ou resultado. Os dados da ferramenta ficam no seu dispositivo. Sem cadastro.
Sem cadastro
Carregando ferramenta…
Como usar
- 1Digite os valores e escolha as opções.
- 2Execute a ferramenta e confira o resultado.
- 3Copie o resultado ou mude os dados para comparar.
Saiba mais
Confira intervalos e unidades. Os resultados dependem dos dados e do navegador.
Os anúncios podem processar dados de conexão. A personalização segue suas escolhas de privacidade. Privacidade (inglês)
Exemplo calculado de entrada e saída
Resultados do motor real com os valores abaixo, sem dados pessoais ou trabalhos salvos. Carregue o exemplo na ferramenta para conferir as mesmas entradas.
Entrada de exemplo
| Campo | Valor |
|---|---|
| Deslocamento horizontal (px) | 0 |
| Deslocamento vertical (px) | 8 |
| Desfoque (px) | 24 |
| Expansão (px) | 0 |
| Cor | #0F766E |
| Opacidade (%) | 25 |
Resultado de exemplo
box-shadow: 0px 8px 24px 0px rgba(15, 118, 110, 0.25);
Condições de entrada
São limites reais de validação, sem garantir que todo valor aceito seja realista ou adequado ao seu caso.
- Deslocamento horizontal (px): Faixa aceita: -1.000 ≤ x ≤ 1.000
- Deslocamento vertical (px): Faixa aceita: -1.000 ≤ x ≤ 1.000
- Desfoque (px): Faixa aceita: 0 ≤ x ≤ 1.000
- Expansão (px): Faixa aceita: -1.000 ≤ x ≤ 1.000
- Opacidade (%): Faixa aceita: 0 ≤ x ≤ 100