Gerador de sombras da caixa CSS

O CSS Box Shadow Generator é um editor visual da propriedade Box-Shadow CSS. Você ajusta o deslocamento, o raio de desfocagem, o raio de espalhamento, a cor e a opacidade com os controles deslizantes e vê o resultado renderizado em um elemento de visualização e, em seguida, copia o CSS exato. Em vez de adivinhar os valores dos pixels e recarregar a página, você molda a sombra diretamente e lê o código que ela produz.

A propriedade Box-Shadow é enganosamente profunda. Uma única declaração pode empilhar várias sombras, cada uma com seus próprios deslocamentos, desfoque, propagação, cor e uma palavra-chave opcional que pinta a sombra dentro do elemento e não fora. As sombras de interface reais quase sempre usam duas ou mais camadas para parecer naturais, o que é tedioso para escrever à mão. Esta ferramenta gerencia as camadas para você e gera uma declaração válida por especificações na ordem correta separada por vírgulas.

Tudo acontece no seu navegador. Escolha uma predefinição, ajuste as camadas, alterne a visualização entre fundos claros e escuros e copie a propriedade padrão ou um bloco que também inclui o prefixo -webkit. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.