Gerador de box-shadow CSS
Ajuste os parâmetros de uma sombra projetada CSS e obtenha instantaneamente o valor box-shadow correspondente, com pré-visualização ao vivo. Processamento 100% local no seu navegador (WebAssembly) — nada é enviado a um servidor.
Como funciona
A propriedade CSS box-shadow aceita um deslocamento horizontal, um deslocamento vertical, um raio de desfoque, um raio de expansão, uma cor, e uma palavra-chave opcional "inset" para uma sombra interna. Esta ferramenta compõe esses valores ao vivo para evitar que você tenha que adivinhar os ajustes corretos manualmente.
Qual a diferença entre o desfoque e a expansão?
O desfoque suaviza as bordas da sombra tornando-as progressivas, enquanto a expansão aumenta ou reduz o tamanho da sombra antes da aplicação do desfoque.
Para que serve a opção "inset"?
Ela transforma a sombra projetada em sombra interna, projetada dentro do elemento, geralmente usada para dar um efeito de afundamento ou de campo de entrada.
Processamento 100% local: o cálculo ocorre inteiramente no seu navegador via WebAssembly, sem qualquer envio de dados a um servidor.