Gerador de Box Shadow CSS
Ajuste uma box-shadow com controles deslizantes e copie o CSS exato, com prévia ao vivo.
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
Como usar Gerador de Box Shadow CSS
- Arraste os controles de deslocamento, desfoque e propagação para moldar a sombra.
- Defina a cor e a opacidade da sombra, e ative o inset se precisar.
- Copie o CSS box-shadow gerado para o seu stylesheet.
Sobre Gerador de Box Shadow CSS
Projete uma box-shadow CSS com controles deslizantes e copie a linha exata quando ela estiver do jeito certo. Você controla o deslocamento horizontal e vertical, que movem a sombra para a esquerda ou direita e para cima ou para baixo; o raio de desfoque, que suaviza sua borda; e a propagação, que aumenta ou diminui a sombra em relação à caixa. Uma prévia ao vivo é atualizada conforme você arrasta, então você vê cada mudança imediatamente.
Para a cor, você escolhe uma cor de sombra e define um controle de opacidade separadamente, e a ferramenta combina os dois em um único valor rgba(), para que uma sombra cinza suave a 20 por cento de opacidade pareça natural, em vez de um bloco sólido. Um botão de inset alterna a sombra de fora da caixa para dentro dela recortada, que é como você faz um campo parecer afundado ou um botão parecer pressionado.
A prévia fica sobre um fundo quadriculado, o que é proposital: isso permite avaliar honestamente uma sombra suave e semitransparente, da forma como ela cairia sobre qualquer página real. Uma observação importante: ele gera uma única camada de sombra, não várias sombras separadas por vírgula empilhadas, e a prévia mostra o efeito em uma caixa simples. Combine-o com o gerador de gradiente CSS para estilizar também o fundo da caixa.
Perguntas frequentes
O que cada um dos controles de deslocamento, desfoque e propagação controla?
O deslocamento move a sombra horizontal e verticalmente para longe da caixa. O desfoque suaviza sua borda, então um desfoque maior dá uma sombra mais difusa. A propagação altera o tamanho da sombra, tornando-a maior ou menor que a caixa antes de o desfoque ser aplicado.
Como a cor da sombra é definida?
Você escolhe uma cor e ajusta um controle de opacidade, e a ferramenta os combina em um único valor rgba(). Isso significa que você controla tanto o tom quanto a transparência da sombra, o que é o que faz uma sombra parecer suave e natural, em vez de um bloco duro.
O que faz a opção inset?
Ela move a sombra para dentro da caixa em vez de para fora dela. Uma sombra externa faz um elemento parecer que se eleva da página; uma sombra inset o faz parecer afundado ou pressionado, o que é útil para campos de entrada, reentrâncias e botões pressionados.
Posso criar mais de uma sombra ao mesmo tempo?
Não. Esta ferramenta cria uma única camada de sombra. O CSS realmente permite várias sombras separadas por vírgula em um elemento, mas você as combinaria por conta própria; o gerador produz uma linha limpa de box-shadow de cada vez.
Por que a prévia está sobre um fundo quadriculado?
O quadriculado facilita avaliar uma sombra suave ou semitransparente, porque você pode ver quanto do fundo aparece através dela. Uma sombra que parece boa sobre branco pode ser pesada demais em outro lugar, e o padrão revela isso.