Entrada
Preparando seu ambiente de trabalho…
Como usar
- Defina os deslocamentos horizontal e vertical, desfoque e expansão.
- Escolha cor e opacidade e ative a sombra interna se necessário.
- Confira a prévia e selecione Copiar CSS.
Construir uma sombra de caixa
Sombras podem separar um card do fundo ou sugerir uma superfície interna. O efeito é controlado por poucos valores e dispensa uma imagem.
A prévia mantém o efeito visível enquanto você ajusta a geometria e a cor. O raio dos cantos permite comparar formas sem acrescentar declarações não relacionadas à saída copiada.
Deslocamento, desfoque e expansão
Os deslocamentos movem a sombra em relação ao elemento. Valores negativos a levam para a esquerda ou para cima; positivos, para a direita ou para baixo.
O desfoque suaviza a borda e não pode ser negativo. A expansão altera o contorno antes do desfoque: valores negativos reduzem a sombra e positivos a ampliam.
0px 8px 24px 0px, black at 15%box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);Uma sombra externa com deslocamento vertical de 8px, desfoque de 24px e preto a 15%.
Cor e sombra interna
O seletor define a cor, e a opacidade controla seu alfa. Uma sombra menos opaca deixa aparecer mais do fundo da página.
Inset desenha a sombra dentro da caixa. O gerador produz uma sombra; várias camadas exigem uma lista separada por vírgulas na folha de estilos.
Usar o CSS
Copiar CSS exporta somente box-shadow:. Para reproduzir os cantos arredondados da prévia, defina border-radius separadamente no elemento.
Entrada de texto de até 1 MiB. Transformações CSS e HTML são executadas em um worker com limite de 30 segundos. As ferramentas de cores usam sRGB; os estilos gerados são prévias e exigem testes no seu próprio layout.
Perguntas frequentes
O raio dos cantos da prévia está no CSS?
Não. Ele só afeta a prévia. Acrescente border-radius separadamente se quiser a mesma forma na interface.
Qual a diferença entre desfoque e expansão?
O desfoque suaviza a borda. A expansão aumenta ou diminui a área da sombra antes de aplicar esse desfoque.
A expansão pode ser negativa?
Sim. Valores negativos tornam a sombra menor; o desfoque deve ser zero ou positivo.
Posso criar uma sombra interna?
Sim. Ative a opção interna e a declaração copiada terá a palavra-chave inset.
O gerador cria várias camadas?
Não. Ele gera uma sombra. Você pode combinar o valor copiado com outras sombras separadas por vírgulas na folha de estilos.