Como usar: Fade Image Edges with CSS
- The preview starts with Fade all edges; drag Fade size to make the soft border wider or narrower.
- Switch the effect to fade only one side (for example the bottom of a hero image) or top and bottom.
- Try it on your own photo with Use my image.
- Copy the CSS onto the image or its container.
Why fade edges with a mask?
A gradient mask fades the image itself into whatever is behind it — a page background, a gradient or another image — instead of painting a colored overlay on top. It works on any background, in light and dark themes, and changes nothing in your image files.
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;
}Two gradients — one vertical, one horizontal — are combined with mask-composite: intersect so all four sides fade. For round, vignette-style fades use the CSS Vignette Generator; for shapes, the Image Shape Mask.
Também pesquisado como: fade image edges css, css fade edges, soft edges css image, fade out image css, css image fade, blur edges image css, feather image css, image fade to transparent css.
Ferramentas que combinam com: Fade Image Edges with CSS
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
- CSS Filter Generator — Adjust blur, brightness, contrast, saturation, hue, grayscale, sepia, invert and drop shadow on a sample or your own image and copy the filter CSS.
Perguntas frequentes
How do I fade the edges of an image with CSS?
Use a gradient mask: mask-image: linear-gradient(...) from transparent to #000 and back. For all four edges, combine a vertical and a horizontal gradient with mask-composite: intersect, as this generator does.
How do I fade only the bottom of an image?
Choose “Fade one edge” with direction Bottom: mask-image: linear-gradient(to bottom, #000 60%, transparent).
Does it work on background images?
Yes — put the mask on the element that has the background-image; the whole element, including the background, fades.
Posso instalar o Fade Image Edges with CSS como um aplicativo da web e usá-lo offline?
Sim. O Fade Image Edges with 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.