mask-cutouts-and-edge-treatment

name	mask-cutouts-and-edge-treatment
description	Use when removing photo backgrounds or treating image edges. Mask cutouts isolate subjects; edge treatment integrates with layout.

Mask Cutouts and Edge Treatment

Mask cutouts (transparent background) for products and people. Edge treatment (feathered, torn, sharp) signals different intentions.

Background removal options

1. Photo editor manual selection (Photoshop, Affinity)
2. AI remove-bg tools (remove.bg, Canva)
3. CSS clip-path (geometric shapes)
4. Mask images (greyscale, define visible areas)

Edge treatments

1. Sharp — clean cut, signals product / data
2. Feathered — soft fade, signals atmospheric / editorial
3. Torn/ragged — hand-crafted feel
4. Drop-shadow — subtle lift from background
5. Stroke — defined outline, signals collage

CSS implementation

.cutout {
  background: transparent;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}
.feathered-edge {
  mask-image: radial-gradient(black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(black 60%, transparent 100%);
}
.torn-edge {
  clip-path: polygon(0 5%, 95% 0, 100% 95%, 5% 100%);
}

Where this fits in the X3 empire

Used in CardPrepAI demo cards (cutout slabs) and editorial collage.