I am trying to create a sort of "window" effect where the div positioned

Question

0

Asked: May 28, 20262026-05-28T06:17:00+00:00 2026-05-28T06:17:00+00:00

I am trying to create a sort of "window" effect where the div positioned

0

I am trying to create a sort of "window" effect where the div positioned above all the other elements is like a window through the overlay (background color) element positioned exactly below it.

Here is an example of what I mean.

I would like the text to show through as if you were looking through a window. How can this be done without the use of images?

Solution:

One solution is to create a very wide semi-transparent border. However, that approach affects the overall dimensions (or appearance of dimensions).

An alternative solution (the one that I am using) is to set a semi-transparent box-shadow
with a large spread, eliminating the need for a separate overlay div.

#cutout {
    box-shadow:         0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
}