Circle Crop Image

Use this circle crop image tool to cut a photo, logo or screenshot into a perfect circle or an adjustable oval, and to save the result as a transparent PNG. Drag the picture inside the round mask to decide what stays, zoom until the subject fills the frame, add a ring if you want one, and download an avatar that is ready for a profile, a team page, a podcast cover or a slide deck.

Everything runs in your browser with the HTML canvas element. The photo is decoded locally, masked locally and exported locally, so it is never uploaded to miniwebtool and there is no queue, no watermark and no upload limit other than the memory of your own device.

What You Can Do With It

Key Features

• Drag to frame, scroll or pinch to zoom: the mask stays fixed while the photo moves behind it, which is the same interaction avatar editors use.
• Show cut area: a ghost of the discarded pixels stays visible in the preview, so you can tell whether you cropped an ear or a shoulder off.
• Circle or oval: a height to width slider turns the circle into a landscape or portrait ellipse, and the export canvas follows the same shape.
• Rotate and mirror: 90 degree steps fix a sideways phone photo, and mirroring flips a selfie back the right way round.
• Ring border and feathered edge: add a coloured ring in output pixels, or soften the rim so the avatar blends into a background.
• Transparent PNG, WebP or JPG: keep the corners empty for PNG and WebP, or fill them with a chosen colour for JPG.
• Avatar size presets: one click for the common 320, 400, 512, 640 and 800 pixel profile picture sizes.
• Copyable CSS: the snippet reproduces the same round avatar on a web page with border-radius and object-fit.

How to Crop an Image into a Circle

1. Load the photo: drag a file onto the drop area, choose Select Image, or paste a copied picture with Ctrl+V.
2. Frame the subject: drag inside the stage to move the photo and use the Zoom slider, the scroll wheel or a pinch gesture to size it. Fill resets to the tightest crop that covers the mask and Fit shows the whole photo inside it.
3. Pick the shape: keep Circle, or switch to Oval and set the height to width ratio.
4. Style the edge: set Ring and its colour, soften the rim with Feather, and choose Transparent or a solid Background.
5. Check the small previews: look at the 128, 64 and 32 pixel versions under the stage and zoom in further if the face disappears.
6. Export: choose an output size and format, then select Download Circle Image.

Profile Picture Sizes That Are Displayed as Circles

Most platforms accept a square upload and apply their own round mask in CSS. Exporting an already circular PNG is still useful for websites, documents and slides, and it lets you control exactly where the mask falls. These are safe upload sizes:

How the Circular Mask Is Drawn

The photo is painted onto a canvas at the output size, then the canvas composite mode is switched to destination-in and an ellipse is filled over it. Only the pixels underneath the ellipse survive; everything else becomes fully transparent. When Feather is above zero the ellipse is filled with a radial gradient instead of a solid colour, so the alpha value falls off gradually and the rim fades out rather than ending on a hard line. A ring, if you add one, is stroked afterwards so it is not erased by the mask.

Because a circle is inscribed in the square it is cut from, the round result always covers about 78.5 percent of the square area, and the four corners are what you lose. That is why zooming in slightly is usually right for a portrait: the top of the head and the shoulders sit exactly in the corners that get removed.

Tips for a Crop That Still Works at 32 Pixels

• Fill the circle with the face. Leave a small margin above the head and let the shoulders run off the edge; a full body shot turns into an unreadable dot.
• Put the eyes slightly above the centre. A face centred exactly in the middle of a circle reads as if it is sinking.
• Prefer a plain, contrasting background. Busy detail behind the head becomes visual noise once the avatar is shrunk.
• Do not upscale. If the source is 200 pixels wide, exporting 800 pixels only blurs it; export at or under the framed source size.
• Add a ring for dark interfaces. A one to two percent white ring keeps a dark photo from merging into a dark chat sidebar.

Frequently Asked Questions

Is my photo uploaded to a server?

No. The file is read by your browser with the FileReader API, drawn onto an HTML canvas and masked there. Nothing is sent to miniwebtool, so the picture stays on your device even if you close the tab. That also means the tool keeps working on a slow connection once the page has loaded, and there is no upload queue or file size limit beyond your own device memory.

How do I keep the area outside the circle transparent?

Set Background to Transparent and choose PNG or WebP as the output format. Only those two formats store an alpha channel. JPG has no transparency at all, so the four corners around the circle are filled with the background colour instead, and the tool switches the background to a solid colour automatically when you select JPG.

Why does my round avatar still look square after I upload it?

Some sites flatten transparency onto a white or dark background when they re-encode your upload, which makes the transparent corners visible again. If that happens, match the background colour to the site instead of using transparency, or upload the square original and let the site apply its own circular mask, which most social networks do in CSS.

What size should a circular profile picture be?

512 by 512 pixels suits almost every profile, because sites downscale a larger image but never add detail to a small one. Common targets are 400 pixels for X and LinkedIn, 320 for Instagram, 512 for Discord, 640 for WhatsApp and 800 for YouTube. Use the size presets in the Output section and let the site do the shrinking.

Can I crop an oval instead of a perfect circle?

Yes. Switch the shape to Oval and move the height to width slider. A ratio below 100 percent gives a wide landscape ellipse, and a ratio above 100 percent gives a tall portrait ellipse that suits head and shoulders shots. The output canvas changes shape with it, so a 512 pixel wide oval at 130 percent exports as 512 by 666 pixels.

Does circle cropping reduce the quality of my photo?

Cropping itself removes pixels outside the circle but does not recompress what remains when you export PNG, which is lossless. Quality only drops if the output size is larger than the framed area of the original, because the browser then has to upscale, or if you choose JPG or WebP, which are lossy. Zooming past roughly 100 percent on a small source is the usual cause of a soft result.

Which file types can I open and save?

You can open anything your browser can decode as an image, which normally covers JPG, PNG, WebP, GIF, BMP, AVIF and SVG. Animated GIFs are cropped as a single still frame. The download is a PNG by default, with WebP and JPG available in the Format list.