How to create transparent selection area with CSS

Issue

I'm trying to create a UI effect where a specific area of a webpage is highlighted and the rest of the page is covered with a semi-transparent black overlay, using only CSS. What is the standard practice for achieving this effect? I'd like the highlighted area to be fully clear and interactive, while the rest of the page dimmed.

Note: I'm looking for a solution that avoids JavaScript and complex HTML structures if possible but should also be supported by the latest browser versions.

Something like this:

Could it be done with CSS for example:

/* Overlay that covers the entire viewport */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
}

Then I tried using mask CSS properties for the selection area but I do not know if this is best practice.

Note: the rectangle will is meant to be interactive (moving, resizing)

Update: this might be a good solution using box-shadow for the dimmed outside effect.

.my-rectangle {
  position: absolute;
  z-index: 10001;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-color: rgba(102, 179, 255, 0.2);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); /* Dimmed background outside the rectangle */
}

Solution

.box {
    z-index: 23;
    width: 500px;
    height: 200px;
    background: transparent;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 10000px solid rgba(45, 37, 37, 0.322);
}

<div class="box"></div>

This is my result:

Answered By - hushanqing