Gerador de sombras CSS
Empilhe até 8 camadas de box-shadow com deslocamento, desfoque, propagação, cor e inset, veja a pré-visualização e copie o CSS.
- Funciona no navegador
- Sem envio
- O resultado fica no seu dispositivo
Privacidade e limitesExecuta no seu navegador. Nada é enviado.
O conteúdo das entradas fica neste separador; a Refentra não o envia nem guarda. As contagens agregadas opcionais de ações só são enviadas com o seu consentimento para medição de utilização. Limpe o espaço ao terminar.
Perfil suportado: 1–8 camadas px editáveis, inset e alfa 0–1; desfoque não negativo.
Máximo 200.000 unidades UTF-16; os parsers podem ter limites inferiores. Worker: 15 segundos (regex 1,5 segundos).
Verificar os dados e o resultado
- Preparar e escolher a operação
Defina os desvios horizontal e vertical, o desfoque, a expansão, a cor e o alfa de cada camada; ative inset para sombras interiores.
- Verificar um exemplo concreto
Experimente esta amostra e compare com o resultado indicado: x=0 y=4 blur=8 spread=0 color=#000000 alpha=0.25 → 0px 4px 8px 0px rgba(0, 0, 0, 0.25)
- Rever antes de reutilizar o resultado
Veja a sombra composta sobre um fundo com contraste; as várias camadas são separadas por vírgulas e mantêm a sua ordem.
Respostas para esta tarefa
Porque é que uma sombra pode desaparecer depois de copiada?
Um elemento ascendente com recorte ou overflow pode cortá-la; um alfa 0 ou um fundo igual também pode ocultar uma sombra que, de outro modo, é válida.
O que devo verificar se os dados falharem?
Indique de 1 a 8 camadas válidas; o desfoque não pode ser negativo e o alfa tem de estar entre 0 e 1. Os desvios e a expansão podem ser negativos.
Onde termina o alcance desta ferramenta?
O resultado aplica o estilo à caixa do elemento; não gera text-shadow nem segue o contorno opaco de uma imagem transparente.