Adicionar Sombra à Imagem

A ferramenta Adicionar Sombra à Imagem destaca qualquer foto da página com uma sombra suave e convincente — inteiramente no seu navegador. Envie uma foto, captura de tela, logotipo ou recorte PNG, arraste a fonte de luz para definir o ângulo e depois ajuste desfoque, expansão, opacidade e cor. Em um PNG transparente a sombra é construída a partir do canal alfa da imagem, então um produto ou adesivo projeta uma sombra no próprio contorno em vez de um retângulo. Exporte um PNG com fundo transparente, um JPG sobre um fundo sólido ou em gradiente, ou copie o código CSS box-shadow correspondente. Nada é enviado — sua imagem nunca sai do seu dispositivo.

Os três números que fazem uma sombra: deslocamento, desfoque e expansão

Quase toda sombra ruim vem de errar um desses três. O deslocamento é o quanto a sombra é empurrada para longe do assunto — ele indica ao observador onde está a luz e a que altura o objeto flutua. O desfoque é o quão suave é a borda: um desfoque pequeno parece luz dura e direta (sol, um flash), um desfoque grande parece luz difusa (um dia nublado, um softbox). A expansão aumenta ou reduz a forma da sombra antes de o desfoque ser aplicado, que é como se obtém um halo pesado ou uma sombra um pouco recolhida sob o objeto.

Como adicionar uma sombra à sua imagem

1. Envie sua imagem: Arraste uma foto para a caixa de envio ou toque para escolher uma. Nada é enviado — o arquivo é lido direto no seu navegador.
2. Posicione a luz: Arraste o sol no painel Fonte de luz. A sombra cai no lado oposto, e arrastar para mais longe do centro a empurra para mais longe. As setas também funcionam.
3. Modele a sombra: Escolha um tipo — Projetada, Em camadas, Longa ou Brilho — e depois defina Desfoque, Expansão, Opacidade e a cor da sombra.
4. Escolha um fundo: Mantenha Transparente para um PNG, ou preencha com uma cor sólida ou um gradiente. O Preenchimento extra acrescenta espaço de respiro ao redor do resultado.
5. Baixe ou copie: Salve um PNG ou JPG no tamanho original, pela metade ou em 2× — ou copie o CSS gerado para reutilizar a mesma sombra em um elemento da web.

Sombras que acompanham o assunto, não a caixa

A maioria das ferramentas de sombra online desenha um retângulo atrás do seu arquivo. Isso serve para uma foto, mas está errado para um recorte de produto, um logotipo ou um adesivo: uma garrafa redonda não deveria projetar uma sombra quadrada. Esta ferramenta lê o canal alfa da sua imagem e constrói a sombra a partir da silhueta real, então as áreas transparentes ficam sem sombra. Envie um PNG transparente e você verá uma nota verde confirmando isso. Para uma foto opaca comum a silhueta é simplesmente o retângulo da imagem — arredondado primeiro, se você definir um raio de canto.

Qual tipo de sombra você deve usar?

Por que porcentagens, e não pixels

Cada controle aqui é uma porcentagem do lado mais curto da imagem. Um desfoque de 9% parece o mesmo em uma miniatura de 400 px e em uma foto de 4000 px, então uma predefinição de que você goste continua funcionando quando você troca por uma imagem maior — sem recalcular. A ferramenta ainda mostra o valor equivalente em pixels ao lado do controle de desfoque e dentro do painel de CSS, para quando você precisar dos números reais.

Dicas para uma sombra convincente

Minha imagem é privada?

Sim. Diferente de editores online que enviam sua foto a um servidor para processar, esta ferramenta funciona inteiramente no seu navegador usando o canvas HTML5. Sua imagem nunca sai do seu dispositivo, nada é armazenado e não há conta para criar. Feche a aba e a imagem some.

Perguntas frequentes

Esta ferramenta de sombra é gratuita e privada?

Sim. É totalmente gratuita e funciona inteiramente no seu navegador usando o canvas HTML5, então sua imagem nunca é enviada a nenhum servidor e permanece no seu próprio dispositivo. A imagem baixada não tem marca d'água e não é preciso criar conta.

A sombra acompanha o formato de um PNG transparente?

Sim. A sombra é construída a partir do canal alfa da imagem, então um produto recortado, um logotipo ou um adesivo projeta uma sombra no próprio contorno, e não em um retângulo. Se a imagem for uma foto opaca comum, a silhueta é o retângulo da foto, opcionalmente com cantos arredondados.

Como manter o fundo transparente?

Defina o fundo como Transparente e baixe um PNG. Só a sombra e o assunto são desenhados, então você pode colocar o resultado sobre qualquer cor depois. O JPG não consegue armazenar transparência, então uma exportação JPG preenche o fundo de branco.

Qual é a diferença entre desfoque e expansão?

O desfoque suaviza a borda da sombra, fazendo-a desaparecer ao longo de uma distância. A expansão aumenta ou reduz a própria forma da sombra antes de ser desfocada, então uma expansão grande com pouco desfoque dá um halo nítido, enquanto pouca expansão com muito desfoque dá uma nuvem suave.

Por que minha sombra é cortada na borda da imagem?

Uma sombra precisa de espaço fora da foto. Esta ferramenta adiciona preenchimento automaticamente a partir do deslocamento, do desfoque e da expansão, e você pode acrescentar mais com o controle Preenchimento extra. Se você exportar um JPG sobre um fundo colorido, é nesse preenchimento que a sombra pousa.

Posso obter o CSS da mesma sombra?

Sim. O painel de CSS mostra uma regra pronta para colar de box-shadow e filter drop-shadow que corresponde às configurações atuais, em pixels medidos na sua imagem. Copie para dar a um elemento da web o mesmo visual sem exportar um arquivo.

Recursos adicionais

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Composição alfa — Wikipedia