Gere sombras CSS com pré-visualização ao vivo. Adicione múltiplas camadas de sombra para profundidade e realismo.
Arrasta os controlos para ajustar o deslocamento horizontal, vertical, o raio de desfoque, a expansão, a cor e a opacidade de uma sombra CSS. Marca Inset para um efeito de sombra interior. A pré-visualização atualiza em tempo real.
Usa os controlos para ajustar cada parâmetro de sombra. Marca Inset para uma sombra interior. Clica na amostra de cor para a alterar. O CSS gerado atualiza em tempo real no bloco de código escuro — clica em Copiar para obtê-lo.
As sombras são uma das formas mais rápidas de mostrar ao utilizador o que está acima da página, o que pode ser premido e o que deve parecer separado do fundo. Na prática, o trabalho útil não está em escrever a sintaxe de box-shadow de memória. Está em encontrar um tratamento de profundidade que combine com o componente, o fundo e o resto da interface.
Esta ferramenta transforma essa procura num processo visível de afinação, em vez de tentativa e erro com números crus.
Esta ferramenta é útil porque torna esse processo de tentativa e erro visível e ajustável.
Uma sombra bem doseada pode elevar um painel o suficiente para ele ser lido como a sua própria camada.
Alguns controlos precisam de profundidade para parecer acionáveis. Muito pouca e ficam planos; demasiada e parecem pesados ou datados.
Uma UI flutuante precisa de separação visual em relação ao conteúdo por trás. As sombras são uma das formas mais simples de criar essa distinção.
Se um componente precisa de uma sombra enorme para ser notado, o problema pode estar mais na hierarquia do layout do que na sombra em si.
Sombras pesadas tornam rapidamente uma interface turva. Pequenos aumentos costumam ter mais efeito visual do que se espera.
A mesma sombra que funciona numa página branca pode parecer completamente errada numa superfície escura ou visualmente carregada.
É um bom caso de uso porque pequenas diferenças visuais importam e, muitas vezes, é preciso algo mais subtil do que aquilo que se escreveria de memória.
Sombras inset são úteis quando um campo ou controlo deve parecer encaixado em vez de elevado.
Se uma equipa já usa um estilo de sombra específico, um gerador facilita reproduzir e reutilizar o valor exato em vez de ir a olho.
Esta ferramenta gera CSS de sombras. Não decide se o componente deve pertencer a uma camada mais alta, se todo o sistema visual está equilibrado ou se o efeito é apropriado em todos os contextos. Ajuda com a sombra em si, não com toda a hierarquia da interface.
As sombras são daqueles detalhes que as pessoas só notam quando parecem erradas. Um gerador ajuda a chegar mais depressa a algo que “parece certo”, com menos afinações arbitrárias.
A expansão expande (valor positivo) ou contrai (valor negativo) a sombra antes de aplicar o desfoque. Uma expansão positiva torna a sombra maior que o elemento; negativa torna-a menor.
O CSS suporta múltiplos box-shadows como lista separada por vírgulas. Gera cada sombra aqui separadamente e combina-as manualmente: box-shadow: sombra1, sombra2;
Esta ferramenta funciona inteiramente no seu navegador. Nada do que escreve ou cola é enviado para qualquer servidor — todo o processamento ocorre localmente no seu dispositivo.