Add soft gradient fading on any edge of an image for smooth transitions and blending.
A fading band extends inward from the image boundary you choose, gradually reducing that part of the picture's visibility so it can blend with content behind it. The transition preserves the image toward the interior while softening the abrupt outer boundary. This is an edge treatment, not a general blur: details within the fade become transparent rather than merely out of focus. The common surprise is that the same faded image can look different over white, dark, colored, or patterned backgrounds.
The transition is tied to an image boundary. At the faded edge, the source image contributes less to the visible result; moving inward, its contribution increases until the picture is fully visible again. Changing the target edge changes the gradient's direction without rotating, cropping, or stretching the source image.
The fade changes how visible existing edge pixels are. It does not invent replacement scenery or extend the photograph beyond its original bounds. Transparent portions reveal the surface beneath the image, which is why a fade should be judged against its intended page, slide, collage, or graphic background.
No. The defining change is a gradual loss of visibility near the selected edge, not a focus blur across the picture. Fine detail may appear softer because it is becoming partly transparent, but the tool is not repairing, smearing, or refocusing those pixels. Use a blur tool when the goal is to obscure detail while keeping the area opaque.
The visible appearance comes from the background behind the partially transparent pixels. A checkerboard commonly indicates transparency; white or black may be the preview surface or a background onto which the result has been flattened. Test the image over its intended background. If transparency must remain editable, the eventual saved format must support an alpha channel.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.