Arrastra para encuadrar
Profile photo crop modal
A dark editor with a round mask: drag to frame, zoom and rotate, and the small previews update as you go.
Settings
Code
<div class="uvq13-crp"><div class="pf"><span class="pv cur" aria-hidden="true"><i class="im"></i></span><span class="who"><b>Ana Torres</b><small>Interior designer</small></span><button type="button" class="fire" aria-haspopup="dialog">Change photo</button></div><div class="ln" aria-hidden="true"><i></i><i></i><i class="s"></i></div><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-crp-t"><header><b id="uvq13-crp-t">Crop photo</b><span class="pvs" aria-hidden="true"><span class="pv p1"><i class="im"></i></span><span class="pv p2"><i class="im"></i></span></span></header><div class="ar" tabindex="0" role="group" aria-label="Crop area" aria-describedby="uvq13-crp-h"><i class="im"></i><i class="mk"></i></div><p class="hn" id="uvq13-crp-h">Drag to frame</p><div class="zm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2M8.5 11h5"/></svg><input type="range" min="100" max="300" step="1" aria-label="Zoom"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2M8.5 11h5M11 8.5v5"/></svg><button type="button" class="rt" aria-label="Rotate 90 degrees"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3M4.5 4v4h4"/></svg></button></div><div class="ac"><button type="button" class="cn">Cancel</button><button type="button" class="ok">Save photo</button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Uploading a profile picture usually ends in a crop step, and this modal makes it pleasant. The photo sits under a circular mask with the outside dimmed, a rule of thirds grid appears while you drag, and the zoom slider, the mouse wheel and a rotate button change the framing. Two small round previews show how it will look in lists. It suits sign up flows, settings and team directories.
The main color is the save button and the focus ring, the second one the editor background. The image cannot leave the circle, arrows and plus or minus keys work from the keyboard, and saving copies the framing to the avatar on the page.