Circle crop an image

Drawing the circle is easy. The corners are the problem

Masking a photo into a circle takes one line of canvas code, which is why there are so many tools that do it. What none of them tell you is what happens to the 21.5% of the square that falls outside the circle — and that is the part which decides whether the file works where you are about to upload it.

There are exactly three answers, and this page makes you pick one on purpose rather than choosing for you. Transparent corners need a destination that honors an alpha channel. Solid corners need you to know the background color you are landing on. And sometimes the honest answer is that you should not crop a circle at all.

When a circle crop is the wrong thing to do

If this is for a profile picture, the platform almost certainly draws the circular mask itself. It wants a square file. Handing it a pre-cropped circle means the corners you created have to be filled by something, and a service that flattens transparency picks its own background — frequently black, which is how people end up with a dark diamond behind their face.

That is why keep it square is one of the three options here rather than a different page you would have to go and find. You came here on the word "circle" because that is what the result looks like; if what you actually need is a square, you should be able to get it without starting over.

If nothing in your image can be lost, the square crop is still not right, because cropping always discards the long edges. The square image tool offers the other route as well: padding to the long side, which keeps every original pixel and adds background instead. Use that one when the subject fills the frame or when the artwork is a logo.

Transparency is real, until something flattens it

A PNG from this page carries a genuine alpha channel, and the corner pixels have an alpha of zero rather than being painted white to look transparent against this site's background. You can verify that by opening the download over a dark background — the corners will show whatever is behind them.

Pick JPEG instead and there is nowhere for the alpha to live, so those corner pixels have to become an actual color. The preview switches to white the instant you choose that format, and the receipt repeats it after the download — the surprise is spent up front rather than when you open the file. Wanting a particular shade behind the circle is what the solid-corner option is for; set it there and the preview matches the file precisely.

The side, in exact pixels

The circle is inscribed in a square, and the square starts in the middle of your image. Nothing about the corners is chosen until you choose it: the download button waits until you have picked transparent, a solid color or no circle, so a file never leaves this page with corners you did not ask for.

The side defaults to the short edge of your image, which is the size that involves no resampling at all. Type a different one if a platform demands it — 400 for many avatars, 512 for app icons — and you will get exactly that number of pixels. Going larger than the source scales up and the page says so; it will look softer, because no detail is invented that the camera never captured.

What opens here

PNG, JPEG, WebP, AVIF, GIF and BMP decode in every current browser. HEIC and TIFF depend on the browser: Safari decodes both through the system, while Chrome, Edge and Firefox decode neither. Rather than refuse files at the door, every submission goes to the same decoder and the message only appears if it actually fails. An animated GIF opens as its first frame, since a canvas holds one frame and a canvas is the encoder here.

Choosing which part of the photo the circle lands on

A circle crop is almost always for a profile picture, and a profile picture is almost always a face that is not in the middle of the frame. A tool that only centers the circle answers a different question than the one you asked: in a group shot, dead center is as likely to be the gap between two people as anyone's face. Drag the subject behind the frame to choose what lands inside the circle, and drag a corner — or use the subject size slider — to zoom in on one person. The zoom reaches sixteen times, which is what it takes to pull a single face out of a wide photograph rather than merely doubling it. The sliders under the frame do the same job as the drag, exactly, so the choice works with a thumb, a keyboard, or a mouse; the preview and the file always come from the same numbers.

The masking happens on your own machine

Everything on this page runs inside the tab you already have open. The decoder is the one your browser ships with, the circular mask is a clip path on a canvas element, and the encoder is the same one that saves any other image you export from a web page. At no point does a copy of your photo travel to a server, because there is no server here to receive it.

That claim is checkable rather than something you have to take on faith. Open the developer tools, switch to the network tab, and crop an image: the list stays empty. Disconnecting from the internet entirely works too — the page keeps functioning, which would be impossible if the work happened somewhere else. There is a longer walkthrough of both methods in how to verify local processing.