Apply dimming to outside of generic element with pure CSS without using masking or clipping

Question

I am trying to apply dimming to the outside of an element. Unfortunately the clip and mask properties in CSS only work on images or svg paths. Here are two examples of the effect I want. I do not want to use JavaScript, only pure CSS.

Mask for image cropper

Mask for video trimmer

*Unfortunately the clip and mask properties in CSS only work on images or svg paths.* --> this is not correct — Temani Afif, Jul 27 '21 at 15:58

score 0 · Answer 1 · answered Jul 27 '21 at 15:50

Adam Argyle (member of Google DevRel) came up with a solution that worked for me.

Cast a box shadow with an extremely large spread (200vmin for example) from the element that you want to be "see through" and apply the overflow: clip property to the container element.

.see-through-element {
  box-shadow: 0 0 0 100vmin hsl(0 0% 0% / 40%);
}

.container-element {
  overflow: clip;
}

Codepen: https://codepen.io/argyleink/pen/MWpyxKd.

Apply dimming to outside of generic element with pure CSS without using masking or clipping

1 Answers1