Como usar: Efeito Fade nas Bordas de Imagem com CSS
- O preview começa com Fade em todas as bordas; arraste Tamanho do fade para deixar a borda suave mais larga ou mais estreita.
- Troque o efeito para aplicar fade só em um lado (por exemplo, a base de uma imagem de destaque) ou em cima e embaixo.
- Teste com a sua própria foto usando Usar minha imagem.
- Copie o CSS para a imagem ou para o contêiner dela.
Por que aplicar fade nas bordas com máscara?
Uma máscara em gradiente faz a própria imagem se fundir com o que está atrás dela — o fundo da página, um gradiente ou outra imagem — em vez de pintar uma sobreposição colorida por cima. Funciona em qualquer fundo, em temas claros e escuros, e não altera os arquivos da sua imagem.
img.soft {
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent),
linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}Dois gradientes — um vertical e outro horizontal — são combinados com mask-composite: intersect, para que as quatro laterais façam fade. Para fades redondos, no estilo vinheta, use o Gerador de Vinheta CSS; para formatos, use a Máscara de Formato de Imagem.
Também pesquisado como: fade nas bordas de imagem css, css fade bordas, bordas suaves css imagem, fade out imagem css, efeito fade imagem css, desfocar bordas imagem css, feather imagem css, imagem fade transparente css.
Ferramentas que combinam com: Efeito Fade nas Bordas de Imagem com CSS
- Gerador de Máscara CSS — Faça imagens e seções desaparecerem gradualmente em vez de terminarem de forma abrupta: esmaeça uma borda, topo e base, as quatro bordas, uma vinheta radial ou um spotlight, corte o elemento em listras — ou aplique uma máscara com um formato (estrela, coração, hexágono, seta…) com bordas suaves e esfumadas, o que o clip-path não consegue.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Gerador de Clip-path CSS — Recorte imagens e elementos em qualquer formato: escolha uma das 15 formas iniciais — triângulo, hexágono, estrela, seta, chevron, balão de fala, círculo, elipse, retângulo arredondado… — e depois arraste os pontos sobre um exemplo ou sobre a sua própria imagem.
- Gerador de Filtro CSS — Ajuste blur, brilho, contraste, saturação, matiz, escala de cinza, sépia, inversão e sombra projetada em uma imagem de exemplo ou na sua e copie o CSS do filter.
Perguntas frequentes
Como aplicar fade nas bordas de uma imagem com CSS?
Use uma máscara em gradiente: mask-image: linear-gradient(...) indo de transparent até #000 e voltando. Para as quatro bordas, combine um gradiente vertical e um horizontal com mask-composite: intersect, como este gerador faz.
Como aplicar fade só na base de uma imagem?
Escolha “Fade em uma borda” com direção Baixo: mask-image: linear-gradient(to bottom, #000 60%, transparent).
Funciona em imagens de fundo?
Sim — coloque a máscara no elemento que tem o background-image; o elemento inteiro, incluindo o fundo, recebe o fade.
Posso instalar o Efeito Fade nas Bordas de Imagem com CSS como um aplicativo da web e usá-lo offline?
Sim. O Efeito Fade nas Bordas de Imagem com CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.