Ferramentas para desenvolvedores
Gerador de CSS Box Shadow
Gere declarações de CSS box-shadow com ajuste de deslocamento, desfoque, expansão, cor e opção de sombra interna.
Executar ferramenta
O gerador de CSS box-shadow permite criar e ajustar sombras para elementos de interface web de forma simples e direta. A ferramenta gera a declaração CSS completa com base nos valores definidos para o deslocamento horizontal, deslocamento vertical, raio de desfoque, expansão e cor da sombra. Cada valor numérico introduzido recebe automaticamente a unidade em píxeis (px) na regra final gerada. Pode configurar sombras projetadas convencionais ou ativar a opção interna (inset) para desenhar sombras embutidas dentro dos limites do elemento visual. O campo de cor aceita formatos como valores hexadecimais com transparência alfa, permitindo obter efeitos subtis ou contrastantes para botões, caixas de destaque e cartões de conteúdo. Se definir zero nos deslocamentos e nas propriedades de desfoque e expansão, o utilitário gera a respetiva declaração com valores a zero sem qualquer conflito. Copie o código CSS gerado diretamente para a folha de estilos do seu projeto.
Instruções
- Introduza os valores pretendidos para o deslocamento horizontal e vertical.
- Ajuste o raio de desfoque e a expansão da sombra conforme o efeito visual pretendido.
- Indique a cor da sombra no campo de texto, como por exemplo #00000033.
- Assinale a opção de sombra interna se pretender o efeito no interior do elemento.
- Copie a declaração CSS gerada para aplicar na sua folha de estilos.
Exemplos
- Configuração padrão com deslocamento horizontal de 2, deslocamento vertical de 2, desfoque de 5, expansão de 0 e cor #00000033, produzindo box-shadow: 2px 2px 5px 0px #00000033;
- Sombra interna com deslocamento horizontal de 0, deslocamento vertical de 4, desfoque de 10, expansão de 2, cor #00000040 e opção interna ativa, produzindo box-shadow: inset 0px 4px 10px 2px #00000040;
Perguntas frequentes
Como é estruturada a propriedade CSS gerada?
A ferramenta organiza a regra com os valores de deslocamento horizontal, deslocamento vertical, desfoque e expansão em píxeis, seguidos do código de cor e do modificador inset quando aplicável.
É possível utilizar o valor zero nos parâmetros numéricos?
Sim, pode definir zero nos campos de deslocamento, desfoque ou expansão para desenhar sombras centradas ou com contornos nítidos.
Como aplicar uma sombra no interior de um elemento?
Basta ativar a opção de sombra interna para que a palavra-chave inset seja incluída na declaração CSS final.