Image Opacity Adjuster
Adjust an image's overall opacity with a 0–100% slider that scales the alpha channel proportionally, preserving RGB colors and existing translucency. Everything runs locally in your browser and exports as PNG.
FreeOnline Tool
Loading…
How to Use
- Click to select an image, or drag a JPG / PNG / WebP / GIF onto the dashed area.
- Drag the “Opacity” slider (0–100%, default 80%). The preview updates automatically, or click “Apply opacity” to reprocess immediately.
- Compare the original and adjusted previews; the checkerboard background shows transparent areas.
- Click “Download PNG” to save the result as a file such as opacity-80.png.
- Use “Load sample data” to try the built-in 640×400 sample, and “Clear” to start over.
Features
- Opacity ranges from 0–100% in 1% steps and defaults to 80%: 0% is fully transparent, while 100% keeps the original alpha.
- Only the alpha channel is scaled: new alpha = original alpha × percentage. RGB colors stay untouched, so already-translucent PNGs fade proportionally instead of being flattened to one opacity.
- The preview recalculates automatically while you drag (about 40 ms debounce), showing the original and result side by side on a checkerboard background.
- Accepts JPG, PNG, WebP, GIF, and other browser-decodable image files; output is always a PNG with an alpha channel.
- All pixel work happens locally in the browser — images are never uploaded — with both click-to-select and drag-and-drop loading.
Use Cases
Semi-transparent overlay assets
Turn an opaque PNG into a translucent layer for posters, slide decks, or web overlays.
UI design checks
Preview how an icon or image looks at different opacity levels and inspect its edges on a checkerboard background.
Preparing watermark logos
Set a logo to a suitable opacity and export a PNG for use as a watermark or corner badge.
Teaching alpha compositing
Demonstrate how proportional alpha scaling works while RGB channels remain unchanged, useful for lessons and tutorials.
FAQ
Which image formats are supported?
You can load JPG, PNG, WebP, GIF, and any other image the browser can decode (the file type must be image/*). Output is always PNG. Animated GIFs are processed as a single static frame and exported without animation. If the browser cannot decode a file, the status line reports an image load failure.
Does changing opacity alter the colors?
No. The tool only scales the alpha channel and leaves the R, G, and B channels untouched, so colors along semi-transparent edges do not shift.
Why did my semi-transparent PNG become fainter than expected?
The tool multiplies rather than overwrites: new alpha = original alpha × percentage. A pixel with 50% alpha at 80% opacity becomes 40%, so translucent areas fade proportionally.
What do 0% and 100% mean?
At 0% every pixel's alpha becomes 0, making the image fully invisible. At 100% alpha is unchanged: opaque images stay fully opaque, and semi-transparent PNGs keep their original transparency.
Are images uploaded to a server?
No. Loading, pixel processing, and PNG export all happen in your browser via Canvas; image data never leaves your device. Very large images are limited by browser memory and Canvas size limits.
What format is downloaded?
The result is always exported as PNG so the alpha channel is preserved, with a filename such as opacity-80.png.