Uwarp

Or try an example

Size

The hexagon stays centered. Pixels outside it become transparent in the PNG.

Help Us Improve

—

(—)

Hexagon image crop

Crop a photo into a regular hexagon and download a PNG with a clear outside. Pointy or flat top. Free, no sign-in.

What this hexagon crop does

Crop a photo into a regular hexagon and download a PNG. The area outside the hexagon is transparent. Choose a pointy top or a flat top, and shrink the hexagon from the center. A circle crop is on Circle Crop Image. A square crop is on Square Crop.

The crop

One regular hexagon, centered on the photo.

  1. Pointy or flat: Pointy top puts a vertex at the top. Flat top puts an edge at the top.

  2. Size: 100 percent is the largest hexagon that fits. Smaller sizes stay centered.

  3. Clear outside: The PNG keeps the hexagon and leaves the rest transparent.

How to crop a hexagon

Load a photo, pick the shape, and download.

  1. Load a photo

    Use an example or upload a PNG, JPEG, or WebP.

  2. Choose the top

    Switch between pointy top and flat top. The preview updates.

  3. Download the PNG

    The file is the same pixel size as the loaded photo, with a clear outside.

Tips

How the hexagon sits on the photo.
  • 01

    Leave a margin

    Drop the size below 100 when the subject should sit inside the hexagon with room around it.

  • 02

    Match the frame

    A tall portrait often looks better pointy. A wide photo often looks better flat.

  • 03

    Use a circle for avatars

    Round profile photos are on Circle Crop Image and PFP Cropper.

When to use this page

Jobs this crop is built for.

  • A hexagon cutout

    Download a PNG you can place on another background.

  • A badge or icon

    Center a logo or a face inside the hexagon.

  • A layout tile

    Prepare one tile when a design uses hexagon frames.

What you get

A transparent hexagon from one photo.

  1. Live preview: Orientation and size update the hexagon before you download.

  2. No account: The crop runs in the page. There is no sign-in step.

  3. A PNG: The download keeps the transparent pixels outside the hexagon.

Technical details

How the hexagon is drawn.
Shape
Six equal sides. The radius is the distance from the center to a vertex.
Fit
At 100 percent the hexagon touches the nearer pair of edges and stays inside the photo.
Output
PNG at the loaded pixel size. Pixels outside the clip are transparent.
Where it runs
In your browser.

Sources & References

Where the clipping behavior comes from.
  • “The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the current clipping region.”
    — MDN Web Docs — CanvasRenderingContext2D.clip()

    CanvasRenderingContext2D.clip(): The hexagon path becomes the clip, so pixels outside it are left clear. developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip

  • “The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element.”
    — MDN Web Docs — Canvas API

    Canvas API: The crop is drawn on a canvas and saved as a PNG. developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Frequently Asked Questions

Quick answers about this tool—open a question to read more.