Crop an image into a circle

Mask an image into a circular avatar or thumbnail.

freeworks offlinenothing uploaded
ToolCircle Crop
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

A circular clipping path is created around the chosen center and radius, the source image is fitted into the circle, and pixels outside the path are made transparent or filled with a background. The exported dimensions are normally a square containing the circle.

  • A square canvas makes the circle diameter unambiguous for consumers.

Worked example

Profile Avatar
Crop a photo into a circular shape for a profile avatar
Input
											data:image/png;base64,iVBORw0KGgo... (image data URL)
Output
												Square PNG with transparent pixels outside the circular crop

When to use this

Profile avatars, contact sheets, and masked UI image previews use circular crops.

Edge cases

  • A rectangular source needs a cover crop before circular clipping.
  • A transparent output format is required to preserve corners.
  • A focal point outside the circle is discarded rather than recovered.

References