A picture is cropped to a circle by masking the source image with a perfect round shape and exporting the result as a transparent PNG. The Circle Crop tool at /image/circle-crop/ builds that mask from the largest centered square of the source, then fills every pixel outside the circle with full transparency. The output keeps the source image's original pixel dimensions, which matters whenever the circle is going to be printed, uploaded as an avatar, or placed over another design at a specific size.
People usually want a circle crop for one of a few reasons: a social profile photo, a clean avatar in a comment thread, a circular logo container, or a styled element on a landing page. All of those uses have the same underlying requirement, which is a circular PNG where everything outside the round area is transparent. Doing that by hand in an image editor means selecting an ellipse, inverting, deleting, and exporting with transparency enabled, and the steps vary by app. A dedicated tool removes that fiddling and produces a consistent result every time.
The workflow described in this guide works on any modern desktop browser and accepts JPG, PNG, and WebP files up to 25 MiB. Nothing is uploaded to a server, which is worth knowing if the image is a personal photo, a draft design, or anything that should not leave the device. The output is always a transparent PNG, which is the only common image format that supports an alpha channel on every modern platform, including browsers, social networks, and design software. If you are working with a screenshot or a flat graphic and need transparency elsewhere, the same approach can be extended with tools like Add Border to Image or Round Image Corners for rectangular designs with softer edges.
What Circle Crop Does to Your Image
Circle Crop takes the largest centered square your image can offer, draws a perfect circle that fills that square, and turns every pixel outside that circle into full transparency. The corner pixels of the underlying square, which would otherwise show as triangles in a rectangle or as a bounding square, become invisible. The visible result is a circle exactly as wide as the shorter side of the original picture, centered both horizontally and vertically.
Because the circle is built from a square, the maximum possible circle diameter is always equal to the shorter side of the source. If your image is 1600 by 900 pixels, the circle is 900 pixels across and is centered in the 1600 by 900 canvas. If the image is already square, the circle touches all four edges. If you need a different framing, where the circle sits off-center or skips part of the original composition, you would use the general Image Cropper tool first to reposition the square, then run Circle Crop on the result.
The output is always a PNG with an alpha channel. That matters because JPG does not support transparency at all, and WebP supports it on some viewers but not all. PNG's alpha channel is universally supported in browsers, design tools, and operating systems, which is why Circle Crop standardizes on it regardless of the input format.
File Inputs, Size Limits, and Output
| Aspect | What Circle Crop accepts |
|---|---|
| Input formats | JPG, PNG, WebP |
| Maximum file size | 25 MiB |
| Output format | PNG with full alpha transparency |
| Output dimensions | Original source dimensions (not reduced) |
| Circle placement | Geometric center of the image |
| Circle diameter | Equal to the shorter side of the source image |
| Processing location | Local browser, no upload |
Because the output keeps the source resolution, a 4000 by 3000 pixel photo gives you a 3000 pixel diameter circle. That is plenty for high-density displays and for printing at small sizes. If the file is larger than you need for sharing, you can follow up with the Image Compressor or the Image Resizer to bring it down to a more reasonable size without leaving the browser.
How to Crop a Picture to a Circle
- Open the Circle Crop tool in your browser and click the upload area to select a JPG, PNG, or WebP file from your device. The tool accepts files up to 25 MiB and confirms the source width and height in pixels once the image is loaded.
- Check the displayed dimensions so you know exactly how large the circle will be. The diameter of the circle will equal the smaller of the two numbers, and the canvas will keep the original full size, which keeps the rest of your design layout stable.
- Select the option to create a circle crop. Circle Crop will automatically take the largest centered square of the source image, mask it into a perfect circle, and set every pixel outside the circle to fully transparent. There is no slider or radius control because the goal is to maximize the circle within the original frame.
- Inspect the preview, which is itself a transparent PNG. Look for any part of the subject that gets clipped by the circle. Faces, logos, and centered objects usually sit nicely in the result; off-center subjects may need to be reframed first using the Image Cropper and then re-cropped into a circle.
- Download the transparent PNG to your device. The downloaded file matches the source image's pixel dimensions and is ready to drop into a profile picture uploader, a design layout, or a documentation page.
Choosing the Right Source Image for a Clean Result
The biggest factor in whether a circle crop looks good is what sits in the center of the image when it loads. Circle Crop uses the geometric center, not a detected face or a smart focal point, so anything important should already be near the middle of the frame. For portraits, that means roughly centering the eyes a little above the middle so the chin and forehead are not clipped by the lower and upper arcs of the circle.
If the subject is clearly off-center, the simplest fix is to use the Image Cropper to move the subject into the center first, then run Circle Crop on the result. Doing it in that order avoids any double-cropping and keeps the circle as large as possible. A related guide at How Can I Crop a Circle Out of an Image covers the same idea in more detail and includes framing tips.
Background also matters. A circle with transparency works best when the original background either disappears cleanly or is replaced by a solid color or pattern in the destination. If your image has a busy background that you want gone, the circle itself hides the corners, so it is often enough on its own. For square avatars on social platforms that fill the background with a color, the transparent corners will not show anyway.
Circle Crop vs Rounded Corners vs Full Crop
| Tool | Shape produced | Best for |
|---|---|---|
| Circle Crop | Full circle with transparent corners | Avatars, profile photos, circular logos, round badges |
| Round Image Corners | Rectangle with rounded corners | Product cards, blog thumbnails, image grids, framed photos |
| Image Cropper | Plain rectangle at any aspect ratio | Hero images, blog covers, precise framing for print |
The difference matters because the three tools solve different layout problems. Circle Crop replaces the four corners with full transparency, so the visible region is a true circle the entire way through. Round Image Corners keeps the full rectangular dimensions and only smooths the corners, which means the image still fills its container without any empty space. The Image Cropper keeps every pixel of the chosen region, which is what you want when nothing should be hidden at all. Choosing the wrong one tends to leave either transparent gaps in a rectangular layout or visible square corners where a circle was expected.
Common Tasks After a Circle Crop
Once you have a circular transparent PNG, it tends to slot into other workflows. Avatars and profile pictures are the most common destination, and most platforms will accept a PNG directly. If a platform insists on JPG, you can convert with PNG To JPG, though that will replace transparency with a solid background color, usually white.
Designers often pair a circle crop with other finishing touches. A drop shadow under the circle makes it stand out on a flat background, which is straightforward to add with Add Shadow to Image. A thin border around the circle can be created by exporting a slightly larger transparent canvas and filling the ring, or by using Add Border to Image on the circular PNG and accepting that the border will sit on the visible circle rather than the invisible corners.
For documentation, app stores, or website navigation, a circular icon often needs to live alongside a square favicon. The Favicon Generator can produce matching square PNG favicons from the same source, and the guide at How to Generate a Favicon from Any Image walks through that path. The guide at How to Generate a Favicon from Any Local Image covers the same workflow when the source image is already on disk.
When to Pick a Different Shape Instead
Circle Crop is the right answer when the destination wants a round mask, such as a profile photo, a circular logo, or a round badge. If the goal is a softer rectangle with subtle rounded corners rather than a true circle, the Round Image Corners tool keeps the rectangular dimensions and just rounds the corners to a chosen percentage radius. That is a better fit for product cards, blog thumbnails, and image grids where the corners should sit cleanly inside a rectangular container.
For full rectangular crops without any rounding, the general Image Cropper lets you pick any aspect ratio or pixel size. If you are also trying to reduce file size for a website, follow the crop with the Image Compressor and, if you need a specific format, a converter such as Webp Converter or JPG To PNG. The conversion guide at When to Use JPG or PNG and How to Convert Between Them helps decide which output format fits the destination.
If you are working with a brand asset and want the circle to fall on a particular background rather than remain transparent, Add Background to PNG lays a solid color under the transparent circle without changing the pixel dimensions. That combination gives you a fully filled circular image ready for slide decks, posters, or any destination that does not support transparency.
Privacy and Browser Compatibility Notes
Because Circle Crop runs entirely in the browser using canvas operations and standard image decoding, the source image is read from your device and never sent to a remote server. That local-only path is useful when the photo is private, when the design has not been published yet, or when a corporate policy forbids uploading internal images to third-party services. It also means the tool keeps working offline once the page has been loaded at least once, which is handy on a plane or in a place with a weak connection.
Browser support is broad. Any recent desktop release of Chrome, Edge, Firefox, Safari, or Opera handles the PNG alpha output and the transparent preview correctly. On older browsers, especially anything that predates modern canvas export behavior, the preview may show a checkerboard but the downloaded file is still a valid transparent PNG. If you are on a phone or tablet and want a touch-friendly version of the same workflow, the same tool behaves the same way in mobile browsers, although the upload control looks slightly different.
Troubleshooting a Circle Crop That Looks Off
If the result clips the subject, the subject was likely off-center in the source. Open the original in Image Cropper, reframe so the subject sits in the middle, then run Circle Crop again. If the circle looks too small, the source image was very wide and tall in unequal amounts, so the shorter side limited the diameter; cropping the source into a closer-to-square shape first will give a noticeably larger circle.
If the downloaded PNG looks different from the preview, check that the destination supports PNG transparency. Some chat clients and older web forms flatten transparent PNGs into a solid background, which makes the corners reappear as a filled square. Converting to JPG with PNG To JPG before upload avoids that, but only if a non-transparent version is acceptable for that destination.
If the file is rejected for being too large, the source was over 25 MiB. Resize it with Image Resizer or compress it with Image Compressor first, then run Circle Crop on the smaller file. The output PNG will be at the new dimensions, which is usually fine for the destination the circle is meant for.