Image Circle Crop

About Image Circle Crop

The Image Circle Crop tool turns any rectangular photo into a circular image with fully transparent corners, ready for use as an avatar, profile picture, sticker, badge, or design element. The tool draws your image onto an HTML5 canvas, applies a circular clipping path centered on the photo, and exports the result as a PNG with an alpha channel — so the area outside the circle is genuinely transparent rather than filled with a background color. You can drag the photo with mouse or touch to reposition it inside the circle, scale the diameter from 20% to 100% of the smallest image dimension, and add an optional feather edge for a soft falloff. Everything runs locally in your browser; nothing is uploaded.

Why use Image Circle Crop

• True transparency — the corners outside the circle are alpha-zero, not white or solid.
• Full browser privacy — the image never leaves your device or touches a server.
• Touch-friendly drag handle works seamlessly on phones, tablets, and desktops.
• Lossless PNG output preserves the original photo's resolution exactly.
• Optional feather edge produces professional, soft-vignette circular crops.
• Free forever with no watermark, no sign-up, and no megabyte caps.

How to use Image Circle Crop

1. Click the upload field and select a photo (PNG, JPG, WebP, AVIF, or any browser-decodable image).
2. Drag the image with your mouse or finger to reposition it inside the circle preview.
3. Adjust the Diameter slider to control how large the circle is relative to the image.
4. Increase the Feather slider for a soft, gradient edge instead of a hard circle.
5. Click Center to instantly recenter the image if you move it too far.
6. Click Download Transparent PNG to save your circle-cropped image with alpha channel.

When to use Image Circle Crop

• When preparing a profile photo or avatar for a platform that prefers circular images.
• When designing a logo badge, stamp, or sticker that needs a transparent round shape.
• When making a presentation or pitch deck where rectangular photos look out of place.
• When building a circular team-portrait grid for an About page or LinkedIn slide.
• When you need a transparent PNG cutout for compositing in a layered design.
• When converting a square photo to a circular icon for app stores or web buttons.

Examples

Tips

• For perfectly centered subjects, click Center first and then nudge with small drag movements.
• Use a feather value of 4-10px for natural soft edges — anything higher creates a vignette look.
• If the source photo is rectangular, the largest possible circle equals the shorter side; reduce diameter for a smaller circle inside the canvas.
• Pair this tool with Round Avatar Maker if you need preset social-platform output sizes.
• Save as PNG (not JPG) — JPG cannot store transparency and will fill the corners with black or white.

Frequently Asked Questions

Explore the category

Glossary

Alpha channel

An extra channel in PNG/WebP images that stores per-pixel transparency from 0 (clear) to 255 (opaque).

Clipping path

A canvas operation that restricts drawing to a defined shape — here, a circle — leaving everything outside transparent.

Feather

A soft transition along the edge of a mask that blends the visible area into transparency over a few pixels.

Radial gradient

A color or alpha gradient that fades outward from a center point — used here to create the feather effect.

Canvas

An HTML5 element that lets browsers render and manipulate raster pixels with JavaScript.

Compositing

Combining multiple image layers using transparency — easier when one layer has true alpha rather than a baked background.