UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Image Circle Crop

Crop any image into a perfect circle with transparent corners. Browser-only canvas tool.

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

True transparency — the corners outside the circle are alpha-zero, not white or solid.

Full browser privacy

Full browser privacy — the image never leaves your device or touches a server.

Touch-friendly drag handle works

Touch-friendly drag handle works seamlessly on phones, tablets, and desktops.

Lossless PNG output preserves

Lossless PNG output preserves the original photo's resolution exactly.

Optional feather edge produces professional

Optional feather edge produces professional, soft-vignette circular crops.

Free forever with no watermark

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

Profile picture

Input: A 1200x1200 portrait photo

Output: A 1200x1200 transparent PNG with a perfect circle crop centered on the face

Logo badge

Input: A 800x800 square logo with white background

Output: A 800x800 PNG with the logo inside a circle, white corners removed and transparent

Soft vignette

Input: A 1500x1000 landscape photo, feather 20px

Output: A 1500x1000 PNG with a soft circular vignette fading into transparency

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

Will the corners outside the circle be transparent?▾
Yes. The exported PNG has true alpha transparency in the corners — not a white or black fill. You can drop it on any colored background.
Can I save as JPG?▾
We only export PNG because JPG does not support transparency. A JPG would fill the corners with a solid color, defeating the purpose of a circle crop.
Does the tool upload my photo to a server?▾
No. All cropping happens locally in your browser using the HTML5 Canvas API. Your photo never leaves your device.
What is the maximum image size supported?▾
There is no enforced cap. Very large images (above 25 megapixels) may slow down the canvas redraw on low-memory devices.
How do I move the photo inside the circle?▾
Click and drag the image (or touch and drag on mobile) to reposition. Click Center to reset to the middle.
What does the Feather slider do?▾
It softens the edge of the circle using a radial alpha gradient. 0 = hard edge; higher values = wider soft transition.
Can I crop into a non-circular shape like an oval?▾
Not yet. This tool produces a perfect circle. For ovals, use a generic image editor or our Image Crop tool with rectangular selection.
Does the output preserve the original resolution?▾
Yes. The canvas uses the photo's natural width and height, so the PNG keeps the same pixel dimensions as the source.

Explore the category

Image Border & Frame Adder Add a custom border with color and rounded corners to any image. Browser-only, download as PNG. Image Rotate Tool Rotate images 90° CW, 90° CCW, or 180° in your browser. Canvas-based, instant PNG download. Background Remover Remove image backgrounds instantly in your browser using AI. No uploads to servers. Outputs transparent PNG. GIF Cropper Crop a rectangular region from any animated GIF. Set X/Y offset and crop dimensions in pixels. Palette-aware via ffmpeg.wasm. Browser-only. Image Crop Tool Crop rectangles including square presets before PNG download. Image Mirror & Flip Flip images horizontally or vertically in your browser. No upload to server.
Image Formats Explained: JPEG, PNG, WebP, AVIF, GIF Compared Choosing the wrong image format can double your page weight or break compatibility in older browsers. This guide cuts through the noise with Apr 2026 · 9 min WebP: Why You Should Switch from JPEG and PNG Today WebP typically achieves 25-35% smaller file sizes than JPEG at equivalent quality, and browser support is now essentially universal. The cas Apr 2026 · 8 min How Image Compression Works: The Science Behind Smaller Files When you drag a JPEG quality slider from 100 to 80, what actually changes in the file? Understanding the compression algorithm helps you mak Apr 2026 · 9 min

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.