Fancy overlay over content

Let’s assume we need to get fancy shadow above our child nodes that will look like decoration over content and do not respond on any pointer events. This is easy achievable with ::before node, generated by CSS.

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Overlay shadow</title>
</head>
<body>
  <div id="a" class="rect-a">
    <div id="b" class="rect-b"></div>
    <div id="c" class="rect-c"></div>
  </div>
</body>
</html>

CSS:

.rect-a{
  position: relative;
  width: 100px;
  height: 100px;
}
.rect-b{
  background-color: red;
  width: 100px;
  height: 50px;
}
.rect-c{
  background-color: green;
  width: 100px;
  height: 50px;
}
.rect-a::before {
  position: absolute;
  box-shadow: inset 0px 0px 10px 2px blue;
  content: '';
  width: 100%;
  height: 100%;
  pointer-events: none;
}