How to use the 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.
Also searched as: 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.
Tools that pair well with the 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 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.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Frequently asked questions
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.
Can I install Fade Image Edges with CSS as a web app and use it offline?
Yes. Fade Image Edges with CSS is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.