O que é uma sombra projetada?

Uma sombra projetada é uma cópia mais escura e suave de uma imagem, posicionada atrás dela e um pouco deslocada para o lado, como se a imagem flutuasse sobre a página. Ela destaca recortes de produtos, logotipos, capturas de tela e fotos do plano de fundo e dá profundidade a designs planos.

Descrição da ferramenta

Abra uma imagem, ajuste a suavidade da sombra com o Desfoque e mova-a usando os deslocamentos horizontal e vertical. Escolha a cor e a opacidade na seção Cor. Em uma imagem PNG ou WebP com transparência, a sombra acompanha o formato do elemento, e não o retângulo ao redor dele. Uma foto recebe a sombra do seu retângulo.

A tela aumenta apenas o suficiente para acomodar toda a sombra, e o arquivo baixado é um PNG com fundo transparente, pronto para ser inserido em qualquer página ou apresentação.

Recursos

  • Acompanha o formato de imagens transparentes
  • Desfoque, deslocamento, cor e opacidade
  • A tela aumenta para acomodar a sombra, sem cortar nenhuma parte
  • Download de PNG transparente

Como funciona

O Desfoque funciona como o desfoque de uma sombra em CSS: é um desfoque gaussiano cujo desvio padrão corresponde à metade do valor. A sombra desaparece gradualmente a uma distância de aproximadamente uma vez e meia o desfoque além da borda da imagem. Por isso, a tela aumenta nessa mesma medida em cada lado onde a sombra ultrapassa a borda, considerando também o deslocamento.

Dicas

  • Uma sombra desfocada diretamente abaixo da imagem, sem deslocamento horizontal, dá a impressão de que ela está flutuando.
  • Para um aspecto natural, mantenha a opacidade entre 30% e 50%. Sem desfoque e com opacidade total, o resultado fica com um estilo retrô e plano.
  • Em uma página colorida, um tom mais escuro da cor da página parece mais natural do que o preto.
  • Use PNG ou WebP para manter o fundo transparente. JPG coloca a sombra sobre um fundo branco.