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.

As sombras são pintadas fora da caixa e não ocupam espaço, então elas nunca empurram os vizinhos e serão cortadas por qualquer ancestral com transbordamento oculto A propagação é o valor menos compreendido: ela cresce ou encolhe a forma de sombra antes de desfocar, então uma propagação positiva com desfoque zero dá um contorno de deslocamento sólido, que é como os efeitos de borda são falsificados sem afetar o layout O encaixe move a sombra dentro do elemento, útil para estados pressionados e brilhos internos Colocar várias sombras com deslocamento e desfoque crescentes é o quão convincente a profundidade é construída, uma vez que um único desfoque grande é lido como neblina e não como sombra Cada camada custa tempo de renderização, e sombras que repintam durante o pergaminho ou animação são uma fonte comum de brincadeira em dispositivos de menor potência.