Gerador de Box Shadow CSS

O que o Gerador de Box Shadow faz

Esta ferramenta ajuda voce a construir uma box-shadow CSS sem memorizar a ordem dos valores ou chutar numeros. Voce move alguns controles deslizantes, escolhe uma cor e uma caixa de previa ao vivo mostra exatamente como a sombra fica enquanto o CSS correspondente se atualiza ao lado. Quando estiver bom, voce copia a regra e a coloca na sua folha de estilos. E util para desenvolvedores front-end, designers, estudantes aprendendo CSS e qualquer pessoa que queira uma sombra limpa para um cartao, botao ou painel sem tentativa e erro nas ferramentas de desenvolvedor do navegador.

Como usar

1. Arraste o controle de deslocamento horizontal para mover a sombra para a esquerda ou direita.
2. Arraste o controle de deslocamento vertical para mover a sombra para cima ou para baixo.
3. Ajuste o controle de desfoque conforme deseja a borda mais suave ou nitida.
4. Ajuste o controle de expansao para aumentar ou reduzir o tamanho da sombra.
5. Ajuste o controle de opacidade para controlar o quanto a sombra aparece intensa.
6. Escolha a cor da sombra com o seletor de cores.
7. Ative inset se quiser a sombra dentro do elemento em vez de atras.
8. Observe a previa e o CSS se atualizarem ao vivo, depois copie a regra box-shadow gerada.

Um exemplo rapido

Para uma sombra suave e moderna, mantenha o deslocamento horizontal perto de zero, defina um pequeno deslocamento vertical positivo, aumente bastante o desfoque, deixe a expansao em zero e diminua a opacidade para que a sombra fique sutil. Isso da o suave efeito de cartao elevado que voce ve na maioria dos paineis. A partir dai, voce pode mexer em um unico controle para refinar em vez de reescrever todo o valor na mao.

Tudo roda no seu navegador, entao nada e enviado. A ferramenta e privada, gratuita e nao exige cadastro.