"Shadow" effect inside the box

Question

Hello! I was trying to make a kind of "inner shadow" on a div of mine, but I can’t. Does anyone know?

The style is similar to the news boxes in the initial section of the keyboard (http://www.techtudo.com.br/)

Answer 1

The solution is quite simple and can be observed by inspecting the reference element. It is a background in the pseudo-element :after. Follow the code, already with an example image:

.exemplo {
  position: relative;
  width: 300px;
  height: 300px;
}

.exemplo:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background: linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 80%,rgba(0,0,0,.4));
    z-index: 1;
}

img {
  width: 100%;
  height: 100%;
}

<div class="exemplo">
 <img src="https://i.stack.imgur.com/ZBWF6.jpg?s=300&g=1">
</div>

Answer 2

You solve this with 3 lines of CSS... I don’t know what kind of use you need, but the solution can be even simpler, using the image and shadow in the same element as background.

Take the example. You will have two background, one with the image and the other with the "degrade" of the shadow above.

.sombra {
    width: 300px;
    height: 300px;
    background-image: linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,0) 40%,rgba(0,0,0,0) 80%,rgba(0,0,0,.9)), url(http://placecage.com/300/300);
}

<div class="sombra"></div>