Gerador de box-shadow

Como usar o gerador de box-shadow

1. Começa por uma predefinição ou mantém a sombra Suave que vem por omissão. A linha Predefinições oferece Suave, Dura, Em camadas, Elevação, Neumorphism, Interior e Brilho.
2. Em Camadas de sombra, clica numa camada para a selecionar. Cada camada pode ser movida com Subir e Descer, ou apagada com Remover. Adicionar camada duplica a camada selecionada para poderes afinar uma cópia.
3. Edita a camada selecionada em Editar a camada selecionada: arrasta o ponto na área de Deslocamento, ou usa os cursores e os campos numéricos de Deslocamento horizontal (px), Deslocamento vertical (px), Desfoque (px) e Expansão (px).
4. Escolhe a Cor da sombra com o seletor de cores ou escreve qualquer cor CSS no campo de código, e depois define a Opacidade (%). Marca Inset (sombra interior) para desenhar a sombra dentro da caixa.
5. Ajusta as Definições da pré-visualização (Cor da caixa, Cor de fundo, Raio dos cantos (px)) para veres a sombra com as tuas cores reais. Estas definições só afetam a pré-visualização.
6. Copia a declaração em Código CSS com Copiar.

Teclado: seleciona o ponto na área de Deslocamento e usa as setas para o mover 1 px, ou 10 px com Shift.

Como funciona o box-shadow

A sintaxe de uma sombra é box-shadow: [inset] x y blur spread color.

• x e y deslocam a sombra para a direita e para baixo. Valores negativos deslocam-na para a esquerda e para cima. Uma fonte de luz por cima do elemento corresponde a um y positivo.
• Desfoque suaviza a margem. Não pode ser negativo. Um desfoque de 0 dá uma cópia da caixa com contornos nítidos.
• Expansão aumenta (positiva) ou reduz (negativa) a sombra antes do desfoque. Uma expansão negativa com um y grande mantém a sombra por baixo do elemento em vez de à volta dele.
• Cor costuma ter transparência. Esta ferramenta escreve as cores opacas em HEX e as translúcidas em rgba(), que todos os navegadores entendem. Se escreveres uma cor que já tem canal alfa, a Opacidade (%) multiplica-o.
• inset coloca a sombra dentro da borda, como se a caixa estivesse afundada na página.

A sombra acompanha o border-radius do elemento e nunca altera o layout: não ocupa espaço nem faz aparecer barras de deslocamento.

Porquê sobrepor várias sombras?

As sombras reais não são um único retângulo desfocado. Uma sombra pequena, escura e concentrada fica mesmo por baixo do objeto, e outra grande, ténue e difusa espalha-se mais longe. Empilhar duas a cinco camadas imita este efeito e fica muito mais natural do que uma única sombra pesada. A predefinição Em camadas duplica o deslocamento e o desfoque em cada passo, com opacidade baixa, uma técnica popularizada por muitos design systems. Elevação imita as sombras de três camadas do Material Design.

A primeira camada da lista é pintada por cima das outras, exatamente como no valor CSS. A ordem importa sobretudo quando misturas sombras interiores e exteriores ou usas cores fortes.

Neumorphism

O neumorphism («soft UI») usa duas sombras num elemento com a mesma cor do fundo: uma escura deslocada para baixo e para a direita, e uma clara deslocada para cima e para a esquerda. A predefinição Neumorphism define as duas cores como #e0e5ec. Tem em conta que este estilo tem pouco contraste, por isso os botões criados assim precisam de um estado de foco claro e de rótulos legíveis.