Gerador de sombras CSS
Empilhe até 8 camadas de box-shadow com deslocamento, desfoque, espalhamento, cor e inset, veja a prévia e copie o CSS.
- Funciona no navegador
- Sem upload
- O resultado fica no seu dispositivo
Privacidade e limitesRoda no seu navegador. Nada é enviado.
O conteúdo das entradas fica nesta aba; a Refentra não o envia nem armazena. As contagens agregadas opcionais de ações só são enviadas com seu consentimento para medição de uso. Limpe o espaço ao terminar.
Perfil compatível: 1–8 camadas px editáveis, inset e alfa 0–1; desfoque não negativo.
Máximo 200.000 unidades UTF-16; parsers podem aceitar menos. Worker: 15 segundos (regex 1,5 segundo).
Trabalhe com a entrada e o resultado
- Prepare e escolha a operação
Defina os deslocamentos horizontal e vertical, o desfoque, a expansão, a cor e o alfa de cada camada; ative inset para sombras internas.
- Confira um exemplo concreto
Use este exemplo 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)
- Confira antes de reutilizar a saída
Veja a sombra composta sobre um fundo contrastante; várias camadas são separadas por vírgulas e mantêm a ordem.
Respostas para esta tarefa
Por que uma sombra pode sumir depois de copiada?
Um elemento ancestral com corte ou overflow pode cortá-la; alfa 0 ou um fundo igual à cor também podem esconder uma sombra que, de resto, é válida.
O que conferir se a entrada for rejeitada?
Informe de 1 a 8 camadas válidas; o desfoque não pode ser negativo, e o alfa deve ficar entre 0 e 1. Os deslocamentos e a expansão podem ser negativos.
Onde esta ferramenta termina?
A saída aplica o estilo à caixa do elemento; ela não gera text-shadow nem acompanha o contorno opaco de uma imagem transparente.