# Transparent background PNGs: when you need them and how [Canonical HTML page](https://gradiently.design/guide/transparent-background) A transparent PNG is the file you reach for when a logo or title has to sit on something you didn't design. It is also the file people use when they shouldn't. ## The short version - A transparent background PNG stores an alpha channel, so every pixel can be fully see-through, solid, or anywhere between. - Transparent PNGs are right for logos, titles, stickers and overlays that will sit on backgrounds you don't control, such as videos, slides and websites. - JPG cannot store transparency, so a JPG of a logo always carries a solid box behind it. - Most social posts should be exported with their full background, not as transparent files. - Check a transparent export on both a light and a dark background, because pale fringes and faint shadows only show on one of them. A **transparent background PNG** is an image where the background has been left empty, so only the logo, text or object remains and whatever sits underneath shows through. You need one whenever your design will be placed on something you didn't make: a logo on a client's website, a title over video footage, a sticker on a photo, a mark on a slide. PNG can do this because it stores an alpha channel, a fourth value for every pixel that says how see-through it is. JPG has no alpha channel, which is why a JPG logo always arrives in a white or coloured box. ## How transparency works in a PNG Every pixel in a normal image has three values: red, green and blue. A PNG with transparency adds a fourth, alpha, from fully transparent to fully solid. The in between values matter as much as the extremes. The soft edge of a letter, a gentle shadow or a glass effect is made of partly transparent pixels, and they let the design blend into whatever sits behind it. | Format | Transparency | Best for | | --- | --- | --- | | PNG | Full alpha, soft edges | Logos, titles, stickers, overlays | | JPG | None | Photos and full designs with a background | | SVG | Yes, vector | Logos and icons on websites, scalable to any size | | WebP | Full alpha | Web images where file size matters | | GIF | On or off only, hard edges | Simple animations | | MP4 | None in common use | Video with its own background | Which formats can carry an empty background. GIF transparency is all or nothing, so soft edges look jagged; PNG and WebP keep them smooth. For a deeper comparison of the two most common formats, see [PNG vs JPG](https://gradiently.design/guide/png-vs-jpeg), and for logos on websites, [SVG vs PNG](https://gradiently.design/guide/svg-vs-png) explains when vector is the better choice. ## When you need a transparent PNG - **Logos for other people to use.** Partners, press, event organisers and sponsors place your logo on their own backgrounds. Send a transparent PNG, ideally in light and dark [logo variations](https://gradiently.design/guide/logo-variations), plus an SVG. - **Titles and lower thirds in video.** Video editors layer a transparent PNG over footage, so the words float on the picture. - **Stickers and overlays.** Badges like "New" or "Sold", frames and price tags placed on photos or stories. - **Slides and documents.** A logo or diagram that has to sit on a coloured slide without a white box. - **Websites.** Icons, logos and illustrations placed over coloured sections or hero backgrounds. - **Merchandise and print on demand.** Many print services ask for a transparent PNG so only the artwork is printed on the shirt or mug. A wide banner with the wordmark Northfield over a gradient background The full design: wordmark and background together, right for a banner or a post. The same wordmark Northfield placed on a different coloured background, as a transparent PNG would allow Exported transparent, the same wordmark can sit on a partner's background instead. Here it lands on a different colour field. ## When a transparent background is the wrong choice Transparency is for parts, not finished pieces. A social post, a story, a poster or an email header should be exported with its background, because that background is half the design. Most social platforms don't keep transparency in the posts you upload, and an empty area can be filled with a colour you didn't choose. Some marketplaces also ask for product photos on solid white rather than transparent, so check the platform's own rules. ### Export transparent - A logo for partners and press - A title to lay over video - A sticker or badge for photos - An icon for a coloured web section - Artwork for print on demand ### Export with background - Instagram, LinkedIn and Facebook posts - Stories, Reels covers and thumbnails - Posters, flyers and menus - Email headers - Anything you want to look exactly as designed ## How to make a transparent PNG There are two routes. If you are designing the thing yourself, such as a title, a logo or a badge, build it with no background and export with transparency switched on. If you are starting from a photo, you need to remove the background first, by hand or with a removal tool, which is a different and harder job. The steps below cover the first route. 1. **Design at the size you'll need** Transparent files are often scaled up later, so export larger than you think: a wordmark at 2,000 px wide or more is a safe start. 2. **Leave the background empty** Hide or delete any background layer. Most tools show emptiness as a grey and white checkerboard. 3. **Choose PNG with transparency** In the export dialog, pick PNG and make sure transparency or a clear background is ticked. JPG will silently fill it with white. 4. **Trim the edges** Crop to the artwork with a little breathing room, so people placing it don't fight invisible margins. 5. **Test on light and dark** Drop the file onto a white page and a black page. Look for pale halos, missing shadows and text that disappears on one of them. - Test on white: #ffffff - Test on mid grey: #808080 - Test on near black: #111111 - Test on a brand colour: #2563eb Four backgrounds to check every transparent export against. A pale fringe shows on black; a dark shadow vanishes on it; white artwork disappears on white. > **The white halo problem** If artwork was once drawn on white, its soft edges can keep a thin pale fringe that shows on dark backgrounds. Export from the original layers with no background, rather than erasing white from a flattened image. ## Transparent PNG export in Gradiently In Gradiently, a design normally sits on its Mark, the living background behind everything. With Pro, you can export a transparent PNG instead: only your elements, such as text, shapes, icons and photos, on a clear background, with the Mark left out. That is the file to send a partner, drop into a video editor or place on a website. Pro also exports SVG for the same uses, and both come from the same design you post with its full background. As with any Gradiently export, the design's Mark must be yours. [Exporting images and loops](https://gradiently.design/guide/export-images-and-loops) walks through every format, and for logos on colour, see [logo on gradient background](https://gradiently.design/guide/logo-on-gradient-background). ## FAQ ### Can a JPG have a transparent background? No. JPG has no alpha channel, so any empty area is filled with a solid colour, usually white. Use PNG, WebP or SVG instead. ### Why does my transparent PNG have a white background? Either transparency wasn't enabled when exporting, or the app you opened it in shows empty areas as white. Place it on a dark background to check. ### Should I upload transparent PNGs to Instagram? No. Export posts and stories with their full background, because the platform doesn't keep transparency and may fill empty areas with its own colour. ### What is better for a logo, transparent PNG or SVG? SVG for websites and anything that scales, since it stays sharp at every size. Transparent PNG for apps, video editors and people who can't open SVG. ### What size should a transparent logo PNG be? Larger than you expect to need, at least 2,000 pixels wide for a wordmark, so others can scale it down without it going soft.