What is a transparency gradient?

A gradient over the alpha channel: the image goes from fully visible on one side to a chosen opacity on the other, with a straight ramp between. Colors stay as they are; only how much of each pixel shows changes. It is how an image is blended into a page or another picture.

Linear fades along a straight line, left to right, right to left, top to bottom or bottom to top. Radial fades in a circle from the center: Edges fade keeps the middle and loses the corners, a vignette; Center fades is the reverse, a spotlight. Linear suits edges and banners, radial suits focus and masks.

Can the fade stop short of full transparency?

Set the opacity to a value above 0. At 30, the far side of the fade stays 30% visible instead of disappearing, which blends an image into a background without a hard end. At 0 it fades all the way out.

Can I apply more than one gradient?

Process the image once, download it and drop the result back in with another mode or direction. Each pass multiplies the alpha that is already there, so a horizontal and a vertical fade combine into a fade on both axes.

What happens to pixels that are already transparent?

The new opacity multiplies the alpha that is already there. A pixel at 50% alpha, with 50% applied, ends at 25%; a fully transparent pixel stays fully transparent. So a logo on a transparent background keeps its background, and only the logo itself fades.

How do I fade an image out to transparent?

Set the opacity to 0 and pick Linear. The image is fully visible at the start side and fully transparent at the far side, with a straight gradient between. For a partial fade, set the opacity to 30 or 50 instead: the far side then stays faintly visible.

What does the radius do in radial mode?

Radius is where the radial fade begins, as a share of the distance from the center to a corner. At 0 the tool uses half that distance. A small radius fades most of the image and leaves a tight center; a large one touches only the corners.

How do I see the transparency in the preview?

The result is drawn on a checkerboard, the usual way to show transparency, so faded areas show the squares through. To judge it over real content, download the PNG and place it on your page or in your design tool.

Is my image uploaded anywhere?

No. Your browser decodes the file and does the pixel work with its Canvas API, and the page makes no request with it. You can load the page, go offline and keep working; the download is written from memory on your device.

Gradient transparency maker.

Fade a PNG with a transparency gradient. Linear runs from fully visible to the opacity you set in one of four directions; Radial does the same in a circle from the center, as a vignette or a spotlight.4 linear directions2 radial directionsPNG output0 bytes uploaded

Get Pro Make a gradient fade

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP

Loading the tool…

Need the UI around it? With Pro, your AI agent builds the form, the result card and the rest of the page from a prompt.

Get Pro

How it works

4 steps, no account. It runs in your browser and nothing is uploaded.

Drop an image
Drop the image to fade.
Pick the gradient
Pick Linear and a direction, or Radial and whether the edges or the center fade.
Set the end opacity
Set the opacity the fade ends at: 0 to vanish, higher to stay faintly visible.
Download
Download the PNG and place it over a page or another image.

Nearby in the png tools. Every one free, in the browser.

Pricing

Build it with Pro

The tool is free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds the product around it.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billing

Billed once a year in USD. Cancel anytime.

Yearly-33%MonthlyLifetimePay once

How many people can use the license.
Client work, SaaS products and anything you charge for.
Production-ready React sections: hero, pricing, features, dashboards and more.
Complete multi-page sites you can ship as they are.
React icons from every major library, installable with one command.
Presets that restyle every block, in light and dark.
Lets your AI editor search, preview and install blocks for you.
Priority requests are answered first.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

Seats: 1 seat
Commercial use: Personal & open source only
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Basic usage
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Unlimited usage
Support: Priority

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

How many people can use the license.Seats: 1 seat
Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
Complete multi-page sites you can ship as they are.Templates: All 14 templates
React icons from every major library, installable with one command.React icons: 294k+ icons
Presets that restyle every block, in light and dark.Themes: All 59 themes
Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
Priority requests are answered first.Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

How many people can use the license.Seats: Unlimited seats
Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage

Secure checkout via Stripe
Code lives in your repo
Keep what you've shipped if you cancel
License terms

Questions and answers

Before you trust the result: what to know about the format, the limits and your data.

Build the product around it

Every block, template and icon, installed by your AI agent in your theme. The tools stay free.

Get Pro

Cancel anytimeKeep what you've shipped if you cancel

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular

Frameworks

Explore Examples

More Galleries

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Gradient transparency maker.