Gerador de Box Shadow

Crie sombras com feedback em tempo real

Um box-shadow bem ajustado pode fazer uma interface parecer em camadas, clicável e polida. Uma sombra mal ajustada pode fazer a mesma interface parecer pesada ou inconsistente. Este gerador dá-lhe controlo direto sobre os valores que importam: deslocamento horizontal, deslocamento vertical, desfoque, propagação, cor, opacidade e modo inset. À medida que move cada controlo deslizante, a pré-visualização e o CSS atualizam-se de imediato, o que facilita encontrar um resultado natural em comparação com escrever números à mão.

O resultado é uma declaração CSS padrão, por isso funciona em cartões, modais, botões, menus pendentes, barras de navegação e qualquer outro elemento que aceite box-shadow. Não são criadas imagens e nada é enviado. O navegador limita-se a aplicar a sombra ao elemento de pré-visualização e a copiar o CSS final quando estiver pronto.

Compreender deslocamento, desfoque e propagação

Os deslocamentos horizontal e vertical afastam a sombra do elemento. Um deslocamento vertical positivo sugere frequentemente que o objeto está elevado acima da página, enquanto uma sombra com pouco deslocamento pode parecer um brilho. O desfoque controla a suavidade: um desfoque baixo cria uma aresta dura e gráfica, ao passo que um desfoque maior produz uma sombra difusa mais realista. A propagação altera o tamanho da sombra antes de o desfoque ser aplicado. Uma propagação positiva torna a sombra mais ampla e pesada; uma negativa aperta-a, de modo que o desfoque pareça mais subtil.

Usar sombras num sistema de design

As sombras são mais eficazes quando são consistentes. Em vez de inventar uma sombra nova para cada componente, crie uma pequena escala de elevação: uma sombra subtil para cartões, uma mais forte para popovers e uma focada para modais. Teste as sombras em superfícies claras e escuras, porque a mesma opacidade pode parecer demasiado forte num fundo pálido e demasiado fraca num fundo escuro. As sombras inset são úteis para estados premidos, campos embutidos e painéis rebaixados, mas devem ser usadas com moderação para que os controlos continuem claros e acessíveis.