Gerador de box shadow
Sombras CSS em camadas com visualização ao vivo: defina deslocamento, desfoque, expansão, cor e opacidade, empilhe várias sombras e copie o CSS.
CSS gerado
CSS
box-shadow: none;
Sombras ativas
Ainda não há sombras. Ajuste os controles e clique em Adicionar à pilha de sombras.
Como funciona
Este gerador de sombra de caixa CSS permite criar, empilhar e visualizar várias camadas: defina os deslocamentos X e Y, o desfoque, a dispersão, a cor, a opacidade e a opção interna; depois, adicione cada camada a uma pilha que as combina em uma única declaração separada por vírgulas.
- Definir uma sombra
Defina deslocamento, desfoque, expansão, cor e opacidade, e ative a sombra interna se necessário.
- Adicionar à pilha
Repita para sobrepor várias sombras no mesmo elemento e obter mais profundidade.
- Copie o CSS
Cada camada da pilha é combinada em uma única declaração box-shadow.
A sintaxe do box-shadow
Cada camada de sombra aceita até cinco valores, com a cor por último:
box-shadow: offset-x offset-y blur-radius spread-radius color;
Adicione a palavra-chave inset antes dos deslocamentos para desenhar a sombra dentro da caixa de borda do elemento, em vez de fora. Separe várias camadas com vírgulas; a primeira camada listada é renderizada no topo.
Desfoque versus expansão
- Raio de desfoque: define a suavidade da borda da sombra. Valores mais altos criam um brilho mais difuso; 0 resulta em uma borda dura.
- Raio de expansão: expande ou contrai a forma da sombra antes do desfoque. Uma expansão positiva torna a sombra maior que o elemento; uma expansão negativa a reduz, o que é comum para um efeito flutuante suave e recolhido.
Sobreposição de sombras para profundidade
Uma única sombra grande geralmente parece plana. Sombras de interface reais costumam ter duas ou três camadas: uma sombra próxima ao elemento, estreita, escura e de baixa opacidade para contato, e uma sombra mais distante, maior, mais suave e de menor opacidade para profundidade ambiente. O predefinido Flutuante demonstra isso com duas camadas sobrepostas.
Nota sobre desempenho
O box-shadow segue o border-radius do elemento ao qual é aplicado, não a forma de qualquer elemento filho. Muitas sombras grandes e desfocadas sobrepostas em elementos com rolagem podem ser lentas para redesenhar em celulares menos potentes; filter: drop-shadow() é uma alternativa composta por GPU que vale a pena testar para sombras em imagens ou SVGs.
Perguntas frequentes
Como gero uma sombra de caixa CSS com deslocamento e desfoque personalizados?
Use os controles deslizantes para definir o deslocamento X, deslocamento Y, desfoque e expansão em pixels, escolha uma cor e opacidade da sombra e clique em Adicionar à pilha de sombras. O CSS é atualizado imediatamente abaixo. Por exemplo, uma sombra suave de cartão pode ser box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0,25);
Qual é a diferença entre desfoque e expansão no box-shadow?
O desfoque controla a suavidade da borda da sombra; valores mais altos criam um brilho mais difuso. A expansão expande ou contrai a sombra antes do desfoque: uma expansão positiva torna a sombra maior que o elemento, enquanto uma expansão negativa a reduz. Uma sombra com 30px de desfoque e -10px de expansão cria um efeito flutuante realista com a borda dura recolhida.
Como criar uma sombra interna para fazer um elemento parecer pressionado?
Ative a opção Sombra interna antes de clicar em Adicionar à pilha de sombras. Uma sombra interna é desenhada dentro da caixa de borda do elemento, fazendo-o parecer recuado ou pressionado. O CSS inclui a palavra-chave inset: box-shadow: inset 0px 2px 8px 0px rgba(0, 0, 0, 0,30);
Posso empilhar várias sombras box-shadow em um único elemento?
Sim. Adicione cada camada de sombra individualmente; a ferramenta mantém uma lista e as combina com vírgulas na saída. O empilhamento é um recurso padrão do CSS: box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 20px 40px -10px rgba(0,0,0,.3); Múltiplas camadas criam uma profundidade mais rica do que uma única sombra consegue.
Qual é uma limitação do box-shadow?
box-shadow não respeita o border-radius de um elemento filho; ele segue apenas o border-radius do elemento ao qual a propriedade é aplicada. Valores de desfoque muito altos em várias sombras empilhadas também podem tornar a rolagem lenta em celulares menos potentes, então vale a pena testar filter: drop-shadow() como uma alternativa mais leve para sombras em imagens ou SVGs.