Circle Crop

Circle Crop transforms any rectangular image into a perfectly round frame by applying a circular mask and stripping everything outside its boundary. The result is a PNG with transparency in the corners or, optionally, a solid fill color behind the circle, giving you a badge-shaped image ready for forums, chat apps, team directories and social profiles that render circular avatars.

The tool runs entirely inside your browser using the Canvas API, which means your source photo never leaves your device. There is no upload, no server processing and no temporary storage. You drag a file onto the page, position the circle over the subject, and download the result in JPG, PNG or WebP format. Your original file remains completely untouched throughout the entire session.

Under the hood the tool draws your image onto an off-screen canvas, applies a circular clipping path at the coordinates you choose, and clears every pixel outside that path. When you export to PNG the cleared pixels become fully transparent alpha data. When you pick a background color instead, those pixels are filled with the color value before the canvas is encoded, producing a circle sitting on a solid field rather than floating on transparency.

The flexibility to choose between transparent and filled backgrounds matters more than it might first appear. A transparent circle looks clean on a dark-themed website but turns into a white-boxed circle on a page that does not support alpha compositing. A filled background avoids that problem entirely and gives you control over how the badge integrates with the surrounding design. Both options are available in every export.

Because the clipping happens at the pixel level, the edge quality depends on your source image and the size of the circle relative to the canvas. Anti-aliased edges from high-resolution photos produce smooth, professional-looking circles. Low-resolution sources or very large circles stretched across a small canvas may show slight stairstepping at the circumference, which is a normal consequence of raster resolution limits rather than a defect in the tool.

For the best result, export from a source that is larger than the final circle diameter. Compositing a high-resolution round crop into a design keeps the circle sharp even when the designer scales or re-exports it later, whereas a circle harvested from an already small image will soften noticeably the moment it is enlarged. Where reusability matters, export once to PNG with transparency and keep that master file as your single source.

Plan the subject position before you export: a portrait subject should sit slightly above center so the face is not shaved by the circumference, while a logo or product shot usually reads best when centered. Because the masked frame is lossless in PNG, you can iterate position, size and fill without any accumulation of quality loss between attempts.

The Canvas API lets you define a clipping region using a circular arc. The tool calculates the center and radius of the circle based on where you position it over the image, then tells the canvas to clip everything outside that arc. After clipping, every pixel that falls outside the circle is either cleared to transparent alpha or filled with your chosen background color.

Because the arc is drawn in floating-point coordinates and the canvas rasterizes it with anti-aliasing, the boundary between the kept interior and the cleared exterior includes a narrow band of semi-transparent pixels. These anti-aliased edge pixels are what make the circle look smooth instead of jagged, and they are preserved in the PNG output so the circle blends naturally onto any background.

The circle does not distort or warp the underlying image. It is purely a clipping operation: the pixels inside the circle stay exactly as they are, with the same aspect ratio, color and sharpness. What changes is that everything outside the circle is removed, and the canvas output is sized to the circle diameter.

When you export without selecting a background color, the area outside the circle becomes a transparent alpha channel. This is the correct choice when the circle needs to sit on top of an unknown or variable background, such as a colored website header or a photographic composite.

A filled background is better when you know exactly what color surrounds the circle. Many team-directory pages, internal wikis and email clients do not properly alpha-composite PNG transparency, which causes the transparent corners to render as white or black rectangles. Choosing a fill color that matches the page background eliminates this problem.

You can also use a filled background deliberately as a design choice: a navy circle on a white field, a white circle on a dark background, or any color that frames the subject intentionally. The background color picker gives you precise control over the fill.

The preview shows your image with a circular overlay you can drag. The key is to center the circle on the most important part of the subject. For a headshot, that means the face. For a product, it means the main item. For a logo, it means the primary symbol or word.

If the circle cuts off part of the subject, you have two options: reposition the circle to include the critical area, or crop the source image first with a wider view so the circle has more room. The Crop Image tool in this plugin can prepare the source before you circle-crop it.

When the source image is rectangular and the subject fills most of the frame, a circle placed at the center naturally keeps the subject well-framed. For off-center compositions, move the circle to follow the subject rather than defaulting to center.

• Center the circle on the face for headshots and avatars.
• Shift the circle toward the subject when the subject is not centered.
• Crop the source image first if the circle cannot cover the full subject area.
• Preview the export at the target size to confirm edge smoothness.

The tool offers JPG, PNG and WebP export, but the format you pick has real consequences for the circle. JPG does not support transparency, so exporting a circle with no background color to JPG fills the transparent corners with white by default. This is sometimes intentional but more often a surprise.

PNG is the standard format for circular images because it preserves the alpha channel. Any transparent pixels remain transparent, which means the circle integrates cleanly onto any background. PNG files are larger than JPG or WebP at the same quality, but the transparency support usually outweighs the size cost.

WebP supports alpha transparency just like PNG but with a smaller file size. If the destination platform or CMS accepts WebP, it is the most efficient choice for circular images that need transparency.

The exported circle is sized to match the diameter you set in the preview. If you position a 600-pixel circle over a 4000-pixel source image, the output canvas is 600 by 600 pixels. The source resolution determines how much detail the circle contains, not how large the output is.

For high-DPI displays, consider making the circle larger than the final rendered size. A circle that will display at 120 by 120 pixels on screen benefits from being exported at 240 by 240 pixels or more, so the edge stays sharp on Retina and other high-density screens.

If the circle appears soft or blurry, the source resolution may be too low for the circle diameter you chose. Using a higher-resolution source or a smaller circle relative to the source dimensions will produce a crisper result.