Fade Image Edges with CSS — Soft Edge Generator

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.

Auch gesucht als: 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.

Passende Tools zu: 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.