how can i make like this background with shadow? - html

Question

I have a div which contains an image and overlay:
<div class="container">
<div class="overlay"></div>
<img src="tablet.png" alt="tablet">
</div>
How can I make an overlay with shadow like ?

Answer 1

While it surely can be done via CSS or SVG, most likely that shadow is just a background image where the shadow is already drawn.
However, here's an example of how you could think of it in css:
.scene {
position: relative;
width: 200px;
height: 200px;
background: #60c18b;
overflow: hidden;
}
.object {
position: absolute;
width: 40px;
height: 45px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_121330.png&f=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: top left;
}
.object:after, .object:before {
content: '';
display: block;
width: 100%;
height: 100px;
background: linear-gradient(rgba(0,0,0,0.3), transparent);
transform: skew(-45deg, 0deg);
transform-origin: top left;
position: absolute;
}
.object:before {
transform: translateY(2px) skew(0deg, -45deg);
transform-origin: top right;
width: 100px;
height: 100%;
position: absolute;
right: 0;
background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}
<div class="scene">
<div class="object"></div>
</div>
Note that this is just for fun, it's not perfect and I wouldn't use this on a production site.