You shoot a wide landscape, open the post screen, and the app offers you a square with the two best mountains cut off. Or you take a screenshot of a chart, and the feed crop removes the axis labels that made the chart worth sharing. The picture is fine. The frame is the wrong shape.
There are two ways out. You can crop the picture to fit the frame, or you can put the whole picture on a background that already has the right shape. The second approach is called a matte, and it is what the Matte Generator builds: a square, portrait or story-shaped canvas with your full image placed inside it, on a blurred copy of itself or a solid color. This guide explains when a matte beats a crop, how the geometry works, what the padding, radius and shadow settings do in pixels, and which output size to choose for each platform.
TL;DR: A matte is the background an off-shape photo sits on so it can be posted without being cropped. Instead of cutting a 16:9 image down to 1:1, you fit the whole image inside a 1080 x 1080 or 1080 x 1350 frame and fill the leftover space with a blurred copy of the photo or a solid color. The Matte Generator does this client-side on an HTML canvas, with 15 platform presets, padding from 0 to 25%, rounded corners, an optional drop shadow, and PNG, JPEG or WebP export. It is free, no signup, and nothing is uploaded.
What is a photo matte?
A photo matte is the border between a picture and the edge of its frame. The word comes from picture framing, where a mat board with a cut window sits between a print and the glass so the image does not run to the frame edge. On social media the idea is the same, without the cardboard: the "frame" is the aspect ratio a platform wants, and the matte is whatever fills the space your picture does not.
The defining property of a matte is that nothing is removed from the image. Every pixel you composed survives into the post. The trade is that the image no longer fills the whole tile, so it is smaller on screen than a crop of the same photo would be.
Should you use a matte or crop the image?
Crop when the subject sits in the middle and the edges are incidental. Use a matte when the edges carry information you cannot lose. That is the whole decision, and it is worth making on purpose rather than accepting whatever the upload screen does.
| Situation | Better choice | Why |
|---|---|---|
| Portrait of one person, plain background | Crop | The subject fills more of the tile and reads better at thumbnail size |
| Wide landscape or panorama | Matte | The width is the point of the photo |
| Screenshot of a chart, code or a conversation | Matte | Labels and edges carry the information |
| Product shot that must show the whole object | Matte | Cutting into the product defeats the purpose |
| Group photo with people at both ends | Matte | A crop removes someone |
| Detail shot or texture | Crop | There is no meaningful edge to protect |
| Very wide panorama you want people to swipe through | Neither | Split it into a carousel instead |
If you decide a crop is right after all, the Social Media Image Cropper handles that side of the decision with the same platform presets. For a panorama that is too wide for either approach, the Carousel Scroll Generator slices it into swipeable panels.
How does a matte fit an image into a square?
The fitting rule is the same one CSS calls object-fit: contain, defined in the CSS Images Module Level 3 specification: scale the image by the largest factor that keeps both its width and its height inside the frame, then center it. In code the calculation is three lines:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
Whichever dimension hits the frame edge first decides the scale. A wide image touches the left and right edges and leaves bars above and below. A tall image touches the top and bottom and leaves bars at the sides. The Matte Generator applies padding first, shrinking the frame, then runs this fit inside what remains.
A worked example with real numbers
Take a 1920 x 1080 landscape photo (16:9) and put it on the Instagram square preset, 1080 x 1080, with the default 6% padding.
- The padding is 6% of the frame's shorter side: 1080 x 0.06 = 64.8 pixels on every edge.
- The space left for the image is 1080 - (2 x 64.8) = 950.4 pixels square.
- The fit scale is the smaller of 950.4 / 1920 = 0.495 and 950.4 / 1080 = 0.880, so 0.495.
- The image is drawn at 1920 x 0.495 = 950.4 wide and 1080 x 0.495 = 534.6 tall.
- It is centered vertically: (950.4 - 534.6) / 2 = 207.9, plus the 64.8 padding, puts its top edge at 272.7 pixels.
The tool reports this under the preview as "placed at 950 x 535 inside a 1080 x 1080 frame". You can check any other case the same way.
Which output size should you pick?
Pick the size of the placement you are posting to, and remember that for a wide image, a taller frame does not make the image bigger. The width is what limits it. The table below runs the same fit for two source photos, with 6% padding, across the common presets.
| Preset | Frame | 1920 x 1080 landscape is drawn at | 1080 x 1920 phone portrait is drawn at |
|---|---|---|---|
| Instagram square post | 1080 x 1080 | 950 x 535 | 535 x 950 |
| Instagram portrait post (4:5) | 1080 x 1350 | 950 x 535 | 686 x 1220 |
| Instagram story or Reel (9:16) | 1080 x 1920 | 950 x 535 | 950 x 1690 |
| X post image (16:9) | 1600 x 900 | 1408 x 792 | 446 x 792 |
Two things stand out. For the landscape photo, square and 4:5 portrait give an identical image size; the portrait frame only adds more matte. So for wide pictures, square is the tidier choice. For the tall phone photo, 4:5 portrait gives the image about 28% more height than a square does (1220 against 950 pixels), which is why portrait is the better default for vertical shots.
The full preset list in the tool covers Instagram (square, portrait, landscape, story), Threads (square, portrait), Bluesky (feed image and square), X (post image and summary card), Facebook feed, LinkedIn feed, YouTube thumbnail, Pinterest standard pin and the Open Graph link preview. Platforms change their crops and re-encode uploads, so treat these as "what fits today" rather than a guarantee.
What background should a matte use?
The tool offers four backgrounds: a blurred copy of the image, a solid color you choose, white, or black. The blurred copy is the default and usually the best choice for photos, because it fills the frame with the picture's own palette without you having to pick a color.
| Background | Looks like | Best for | Watch out for |
|---|---|---|---|
| Blurred copy of the image | The familiar Instagram "fill" look | Photos, travel, food, anything colorful | Busy images produce a busy backdrop |
| Solid color | A flat card behind the image | Brand accounts, product shots, logos | Pick a color that does not fight the photo |
| White | Gallery print on a white wall | Minimal feeds, screenshots in light mode | Light-edged photos lose their boundary without a shadow |
| Black | Cinema letterbox | Night shots, film stills, dark UI screenshots | Dark-edged photos lose their boundary without a shadow |
How the blurred backdrop is made
The blurred background is not a guess at a matching color. It is your own image, cropped to fill the whole frame, blurred heavily and darkened slightly, with the sharp image drawn on top. The blur uses the canvas filter property, documented on MDN's CanvasRenderingContext2D.filter page, and its radius scales with the frame: 6% of the shorter side, so 65 pixels on a 1080 square.
One detail matters for quality. A blur near the edge of a canvas averages in transparent pixels from outside it, which leaves a pale rim around the border. The tool avoids that by drawing the backdrop 12% larger than the frame on every side (130 pixels of overdraw on a 1080 square), so the blur has real image data to sample right up to the edge. A 12% black wash then goes over the top, which keeps the sharp subject reading as the subject.
What do padding, corner radius and shadow do?
All three settings are proportional, so they look the same at 1080 pixels as they do at 1600.
Padding runs from 0 to 25% and is measured against the frame's shorter side. At 0, a wide image touches both side edges and the matte shows only as bars above and below: a pure letterbox. Between 4% and 8% reads as a deliberate border without shrinking the picture much. Larger values suit quote-card style posts where the background is part of the design. On a 1080 square, each percentage point of padding removes 21.6 pixels from the image's available width.
Corner radius runs from 0 to 50% and is measured against the placed image's shorter side, not the frame. With the landscape example above, the image is 534.6 pixels tall, so the default 12% radius rounds each corner by about 64 pixels. At 50% the short sides become full semicircles, giving a pill shape.
Drop shadow is on by default. It is a 28% black shadow with a blur of 3% of the frame's shorter side and a downward offset of 1%, which on a 1080 frame means a 32-pixel blur and an 11-pixel drop. It separates the image from a background of similar brightness, which is exactly the case where white or black mattes need help.
How to put a photo on a matte, step by step
- Open the free matte generator and add your image by dropping a file, clicking to browse, or pasting from the clipboard. Paste is the fastest route for screenshots.
- Choose the output size from the grouped preset list. Start with Instagram square for wide photos and Instagram portrait for tall ones.
- Choose the background. Keep the blurred copy for photos; switch to a solid color and type a hex value for brand work.
- Adjust padding, corner radius and the shadow toggle while watching the preview. The preview canvas renders at the real output size, so what you see is the file you will get.
- Pick a format and download. The file is named after your original with
-matteadded, sobeach.jpgbecomesbeach-matte.png.
PNG, JPEG or WebP: which format should you export?
Export PNG when the result has transparency or sharp text, JPEG when you want a small file that every platform accepts, and WebP when you want the smallest file and the destination supports it. JPEG and WebP are encoded at 92% quality.
| Format | Compression | Keeps transparency | Typical use |
|---|---|---|---|
| PNG | Lossless | Yes | Screenshots, logos on a transparent matte, archiving the result |
| JPEG | Lossy, quality 0.92 | No, flattens to opaque | Photo posts on any platform |
| WebP | Lossy, quality 0.92 | Yes | Websites and platforms that accept WebP |
Most social platforms re-encode what you upload anyway, so the export format matters less for the feed than for your own copy. If you plan to edit the result further, keep a PNG. If the file needs to be smaller before upload, the image compression guide walks through the quality settings in more depth.
Can you use a transparent PNG?
Yes, and it works well for logos and cut-out product shots. A transparent PNG placed on a solid color composites cleanly, so a matte becomes a quick way to put a logo on a branded square. If you need to remove a background first, the background remover guide covers that step. Export the result as PNG or WebP to keep transparency in the file; JPEG has no alpha channel and will flatten it.
Does a matte reduce image quality?
No, as long as the source is larger than the space it is drawn into. The output presets are 1080 pixels or wider, and a typical phone photo is 3000 to 4000 pixels on its long side, so the image is scaled down, which loses nothing visible. The canvas draws it with high-quality smoothing.
The one exception is a small source. If you place a 600 x 400 image into a 1080 square with 6% padding, it has to be scaled up to 950 x 634, a factor of about 1.58, and it will look soft for the same reason any enlargement does. The tool cannot add detail that was never in the file. If your source is small, reduce the padding or pick a smaller preset so the scale factor stays close to 1. The image resize guide explains why upscaling blurs and when it is acceptable.
Common mistakes and error messages
A few problems come up often enough to name.
- "That file is not an image." The tool checks the file's reported MIME type before decoding. A PDF or a document dragged in by mistake is rejected at this step.
- "That image could not be read." The file claims to be an image but the browser could not decode it. This happens with corrupt downloads and with formats a particular browser does not support. The dropzone lists PNG, JPEG, WebP, GIF and AVIF; HEIC photos from an iPhone usually need converting first.
- The matte looks gray instead of colorful. You probably picked the solid color option and left the default light gray. Switch the background back to the blurred copy.
- A white image disappears into a white matte. Turn the shadow on, add a little padding, or switch to the blurred backdrop.
- The post still gets cropped. The preset you exported does not match where you posted it. A 1200 x 630 Open Graph image uploaded as an Instagram feed post will be cropped, because 1.91:1 is only accepted as a landscape post.
- The download does not start. Downloads count toward a daily usage limit. When the limit is reached, the tool shows a message rather than a file.
Is anything uploaded?
No. The image is read with a local object URL, composited on an HTML <canvas> element in your browser tab, and encoded to a file with the canvas toBlob method described in the WHATWG HTML canvas specification. No image data is sent to a server, stored or logged. Once the page has loaded, it keeps working with the network disconnected. Usage tracking records only which preset, background and format you used, never the image.
Alternatives to an online matte generator
A browser tool is one route among several.
- The platform's own fit option. Some upload screens, Instagram's among them, can fit a photo inside the frame with plain bars instead of cropping it. It is quick, but you get little or no control over the background, padding or shadow.
- Phone photo editors. Many gallery apps and editing apps have a "fit" or "no crop" mode with a blurred background. They work well for single photos on the phone, and results vary by app.
- Desktop design software. Photoshop, Affinity or Figma give full control, including exact pixel positions. They take longer and need the software installed.
- Command line. ImageMagick can pad an image to a fixed size with
-gravity center -extent 1080x1080, which suits batch jobs on a server.
The advantages of the client-side approach are that it needs no installation or account, works the same on any operating system, and keeps the photo on your device. For a single post or a small batch that is usually the fastest option. For hundreds of images, a script wins.
The social media tools hub lists the related utilities in one place, including the Photo Card Generator for quote and news cards and the Image Watermarker for adding a logo or credit before you post.
