Something went wrong. Try again.
headless React image cropper
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140.stage { width: min(100%, 34rem); aspect-ratio: 4 / 3; margin-inline: auto; border-radius: 0.75rem; background: #111; cursor: grab;}
.stage[data-dragging] { cursor: grabbing;}
.window { overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8), 0 0 0 9999px rgb(0 0 0 / 0.6);}
.window[data-round] { border-radius: 50%;}
.grid { position: absolute; inset: 0; background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0); background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px; background-position: 33.33% 0, 66.67% 0, 0 33.33%, 0 66.67%; background-repeat: no-repeat; color: rgb(255 255 255 / 0.55); opacity: 0; transition: opacity 150ms ease;}
.stage[data-dragging] .grid,.stage[data-pinching] .grid { opacity: 1;}
.controls { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 0;}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;}
button { padding: 0.35rem 0.75rem; border: 1px solid currentColor; border-radius: 0.4rem; background: none; color: inherit; font: inherit; cursor: pointer;}
button[aria-pressed='true'] { background: CanvasText; color: Canvas;}
.slider { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;}
.slider[data-disabled] { opacity: 0.4;}
.slider-control { display: flex; align-items: center; width: 9rem; padding-block: 0.75rem; touch-action: none; user-select: none;}
.slider-track { width: 100%; height: 0.25rem; border-radius: 999px; background: rgb(128 128 128 / 0.35);}
.slider-indicator { border-radius: 999px; background: currentColor;}
.slider-thumb { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: currentColor;}
.slider-thumb:has(:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px;}
.file { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;}
pre { padding: 0.75rem 1rem; border-radius: 0.5rem; background: rgb(128 128 128 / 0.15); font-family: ui-monospace, monospace; font-size: 0.8rem; overflow-x: auto;}