Box Shadow Generator
Generate box shadows
Generate box shadows Executa localmente no seu navegador
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
O Box Shadow Generator cria uma sombra a partir de deslocamento, desfoque, propagação, cor e opacidade, com visualização ao vivo e CSS. As duas configurações que as pessoas confundem são desfoque e propagação: o desfoque suaviza a borda para fora e para dentro da forma da sombra, enquanto a propagação aumenta ou diminui o tamanho da própria sombra antes que qualquer desfoque aconteça. A propagação negativa é o que impede que uma sombra suave pareça um halo, e é por isso que os padrões aqui usam um pequeno valor negativo.
Where people use the
- Construindo uma escala de elevação para cartões, modais e menus.
- Fazendo um estado pressionado ou focado com uma sombra inserida.
- Suavizando uma borda sem adicionar uma borda real.
- Verificando a aparência real dos valores de sombra de uma especificação de design.
How to use the
- 1
Defina os deslocamentos
O deslocamento X move a sombra para a direita, o deslocamento Y a move para baixo. Valores negativos movem-no para o outro lado.
- 2
Definir desfoque e propagação
O desfoque suaviza a borda. Spread expande a sombra antes de desfocar; use uma pequena propagação negativa para uma sombra que fique sob o elemento, e não ao redor dele.
- 3
Escolha a cor e a opacidade
O preto puro com opacidade total parece severo. Uma opacidade baixa, algo entre 8 e 20 por cento, é interpretada como profundidade e não como sujeira.
- 4
Marque inserção se quiser uma sombra interna
Inset desenha a sombra dentro do elemento em vez de atrás dele, o que se adapta aos estados e poços pressionados.
- 5
Copie o CSS
A regra inclui a cor rgba, para que possa ser colada diretamente em uma folha de estilo.
Dicas e práticas recomendadas
- Duas sombras em camadas parecem muito melhores do que uma sombra pesada.
- Mantenha a fonte de luz consistente: se uma carta for lançada para a direita, todas elas deveriam.
- Fique atento às sombras sendo cortadas por um pai com o excesso oculto.
Perguntas frequentes
Qual é a diferença entre desfoque e propagação?
Spread altera o tamanho da forma da sombra antes de qualquer suavização, positivo para aumentar e negativo para diminuir. O desfoque suaviza a borda pelo raio fornecido. Para obter uma sombra compacta sob um cartão, você deseja um pequeno desfoque e uma propagação ligeiramente negativa.
Por que minha sombra parece cinza e suja?
Porque é preto puro com alta opacidade. Use um alfa baixo, em torno de 0,08 a 0,2, e considere tingir a sombra em direção ao tom de fundo, que parece muito mais natural.
Posso ter mais de uma sombra?
Sim. Separe diversas sombras com vírgulas na mesma declaração; eles empilham da frente para trás, então o primeiro fica no topo. As sombras em camadas são a forma como a elevação suave e realista é construída.
A sombra da caixa afeta o layout?
Não. As sombras são pintadas fora da caixa do elemento e não ocupam espaço, portanto podem ser cortadas por um pai com excesso oculto ou por um contêiner compacto.
Animar uma sombra de caixa é caro?
Sim, relativamente. Alterar o desfoque ou a propagação força o navegador a repintar a sombra em cada quadro. Para um movimento suave, anime a opacidade ou transforme, ou faça cross-fade entre duas sombras pré-renderizadas.