How to Crop an Image to a Circle Shape

Use Cases for Circle-Cropped Images

Circular images are extremely common in modern design: almost all social media platforms display avatars as circles (Instagram, Twitter/X, LinkedIn, WeChat, Weibo, etc.); website and app user avatars typically also display as circles; brand logos on e-commerce platforms sometimes use circular format for certain display contexts.

Beyond avatars, circle images are widely used in graphic design: team member profile pages, product feature showcases, icon elements in data visualization, and more. Knowing how to quickly crop a circle image is a practical fundamental design skill.

The Technical Principle Behind Circle Cropping

Images are fundamentally rectangular pixel grids. Achieving a circular effect requires making pixels outside the circle transparent. Therefore, circle crop output must be saved in a format that supports transparency: PNG (most common) or WebP. Saving as JPG will show white (not transparent) outside the circle.

In web design, you can also visually display any square image as a circle using the CSS property border-radius: 50% without actually modifying the image file. But if you need a genuine transparent-background circle image file (e.g., for a PowerPoint or print), you need to actually circle-crop and export as PNG.

Steps for Circle Cropping Online

1. Start with a square image: A circle is inscribed in a square. First crop your image to a 1:1 square ratio, so the inscribed circle uses the maximum available area without cutting too much.
2. Upload the image: Upload your prepared image to an online tool that supports circle cropping.
3. Select circle mode: Choose the "Circle Crop" option in the tool and adjust the center position to place your subject in the center.
4. Export as PNG: Choose PNG format for export, ensuring the area outside the circle is transparent (tool previews typically show this as a checkerboard pattern, representing transparency).
5. Verify transparency: Place the downloaded PNG on a colored background and confirm the area outside the circle is transparent, not white.

Making Circle Images with CSS (For Web Developers)

If you're a web developer, you don't need to actually crop a circular image — CSS achieves this perfectly and is completely reversible. Set the image container to a square and add border-radius: 50% and overflow: hidden:

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

object-fit: cover ensures the image fills the circular container without distortion. This approach's advantage is the original image file stays unchanged, the display shape can be modified at any time, and responsive adaptation is more flexible.

Circle Avatars: What Types of Images Work Best?

Not all images are ideal for circle avatars. Images that work best: subject centered in the frame, clean simple background (solid color or blurred), subject fully contained within the circle without cutoff, sufficient resolution (at least 400×400 px).

For personal avatars: face fills 2/3 or more of the frame with a small amount of background, background color matching your brand colors. For brand logos: ensure the logo displays completely within the circle with appropriate margins — avoid logos touching the edges where circle cropping cuts them.

Oval and Rounded Rectangle Cropping

Beyond perfect circles, design frequently uses ovals and rounded rectangles. Ovals suit landscape or portrait images, achieving soft edge effects without losing too much content. Rounded rectangles are the standard shape for app icons — iOS app icons use a specific-curvature rounded square (Squircle).

Online tools that support circle cropping typically also support ovals and rounded rectangles, with adjustable radius parameters to customize the corner roundness for different design needs.

Circle Avatar Size Requirements by Platform

• Instagram: Upload 320×320 px; platform displays as circle
• Twitter/X: Upload 400×400 px; platform crops to circle
• LinkedIn: Upload 400×400 px; platform displays as circle
• WeChat: Avatar upload recommended 300×300 px or larger
• YouTube: Channel avatar upload 800×800 px, displayed as circle
• GitHub: Upload at least 200×200 px; 500×500 recommended

When uploading, use a high-resolution square image (e.g., 1000×1000 px) — each platform auto-scales to the right size, and one image works for all platforms.