A propriedade box-shadow recebe cinco valores numa ordem específica, e a diferença entre desfoque e expansão não fica óbvia só pela sintaxe. Este gerador oferece controles deslizantes e uma pré-visualização ao vivo para você ajustar a sombra até ela ficar natural e copiar o CSS resultante.
O desfoque suaviza a borda da sombra sem mudar o tamanho dela. A expansão aumenta ou encolhe a forma antes do desfoque, então uma expansão negativa com bastante desfoque gera uma sombra discreta e colada ao elemento.
Combinando duas ou três: uma sombra curta e mais escura perto do elemento e outra ampla e suave mais longe imitam a luz real muito melhor do que uma única sombra pesada. Gere cada camada aqui e junte-as separadas por vírgula.
Para elementos que devem parecer afundados: botões pressionados, campos de formulário e painéis embutidos. A sombra é desenhada dentro da borda, e não fora.
Desfoques grandes em muitos elementos custam tempo de pintura, principalmente durante a rolagem. Se virar um problema, reduza o raio de desfoque ou promova o elemento para a própria camada.
Formatador JSON · Codificador Base64 · Codificador de URL · Decodificador JWT · Ver todas as ferramentas
Também disponível em: English · Español · Français · Deutsch