Gerador de sombra CSS: pré-visualização e copiar código

Gerador de sombra CSS

Este gerador cria um único valor CSS box-shadow a partir de seis controles: deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de expansão, uma cor de sombra com seu próprio controle de opacidade e um alternador inset. Dois seletores de cor adicionais definem a caixa de pré-visualização e seu fundo, para que a sombra fique legível tanto em superfícies claras quanto escuras, e quatro predefinições, soft, hard, glow e inset, carregam uma combinação pronta com um clique. Cada alteração atualiza instantaneamente a linha box-shadow abaixo da pré-visualização, pronta para copiar.

Como o valor box-shadow é montado

O CSS escreve uma sombra em uma ordem fixa: deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de expansão e depois uma cor; para desenhar a sombra dentro da borda da caixa em vez de atrás dela, a palavra inset é colocada na frente. O deslocamento horizontal e vertical move a sombra para os lados ou na vertical, e ambos aceitam valores negativos até -50px, de modo que a sombra pode cair à esquerda da caixa ou ficar acima dela. O raio de desfoque, de 0 a 100px, suaviza a borda da sombra, e o raio de expansão, de -50 a 50px, aumenta ou reduz a sombra independentemente do tamanho da própria caixa. O valor hexadecimal do seletor de cor se decompõe em seus componentes vermelho, verde e azul, e o controle de opacidade, de 0 a 1, se torna o quarto valor dentro de rgba(); em 0 a sombra fica totalmente transparente, e em 1 ela corresponde exatamente à cor escolhida.

Exemplo resolvido

Com um deslocamento horizontal de -6px, um deslocamento vertical de 6px, um desfoque de 14px e uma expansão de 0px, junto com a cor de sombra #ca8a04 e opacidade de 0,35, o resultado é box-shadow: -6px 6px 14px 0px rgba(202, 138, 4, 0.35). O código hexadecimal #ca8a04 se decompõe em vermelho 202, verde 138 e azul 4, e o 0,35 do controle de opacidade passa direto para o quarto valor de rgba(), sem qualquer conversão adicional. Ativar inset com os mesmos seis valores desenha a sombra idêntica dentro da borda da caixa em vez de atrás, um efeito comum em botões pressionados ou campos de entrada afundados.

Código CSS pronto para copiar

.cartao {
  box-shadow: -6px 6px 14px 0px rgba(202, 138, 4, 0.35);
}