Fade Image Online — Free Image Fade Effect Generator
Upload an image and fade it with solid, linear, or radial opacity — live preview, free, in your browser.
A free online tool to fade image content with precise control. Choose a solid, linear gradient, or radial gradient fade, dial in the opacity, and optionally limit the effect to a rectangular area — then download a transparent PNG. Everything runs in your browser; nothing is uploaded.
Why fade an image?
Fading an image — reducing its opacity uniformly or across a gradient — is a common step for hero banners, overlaid text, watermarks, and image-to-image transitions. A solid fade lowers the opacity evenly, which is useful when you're about to layer text or a UI element on top and need the image to recede. A gradient fade keeps part of the image at full strength and tapers the rest, which reads as more natural and is the technique behind most "text over photo" hero sections.
Solid vs linear vs radial fade
- Solid opacity — every pixel in the selected area gets the same transparency. Use it for a flat, uniform dim.
- Linear gradient — the fade moves in a straight line, from fully opaque to your target opacity. This is the classic "fade to transparent at the bottom" effect used behind captions and CTAs.
- Radial gradient — the fade radiates outward from the center of the area in a circle, useful for vignettes or drawing focus to the middle of an image.
Fading just part of an image
By default the fade applies to the whole image. Set the Opacity Area fields — left, top, width, and height, all in pixels — to constrain the effect to a rectangle instead, for example fading only the bottom third of a photo so a title stays legible while the rest of the image stays untouched.
How the fade is rendered
The tool draws your image onto an HTML canvas, then composites a solid fill or gradient over the selected area using globalCompositeOperation: "destination-in" — the gradient's alpha channel becomes the image's transparency. The result is exported as a PNG with a real alpha channel, so it drops cleanly onto any background.
Frequently asked questions
How do I fade an image online?
Drop your image into the tool above, pick an opacity mode — solid, linear, or radial — and drag the opacity slider. The preview updates live; when you're happy with it, click Download PNG to save a transparent PNG with the fade baked in.
What's the difference between solid, linear, and radial fade?
Solid opacity applies the same transparency to every pixel in the selected area. Linear gradient fades in a straight line, from fully opaque at the top of the area to your chosen opacity at the bottom — good for the classic fade-to-transparent-bottom effect. Radial gradient fades outward from the center of the area in a circle, useful for vignettes or spotlighting the middle of an image.
Can I fade just part of an image?
Yes. Set the Opacity Area's left, top, width, and height fields to a rectangle in pixels — the fade only applies inside that region, the rest of the image stays untouched. Leave the fields empty to fade the entire image.
Is my image uploaded anywhere?
No. The fade is rendered locally with the canvas API — your image never leaves your browser, and nothing is stored on a server.
Related tools: Background Generator · CSS Gradient Generator · Favicon Generator
