Is it possible to do something like this with just CSS?
Thanks
Yes friend there are some ways to do, I particularly prefer using a ::after
pseudo element as a radial-gradient
.sombra {
width: 200px;
height: 50px;
position: relative;
overflow: hidden;
}
.sombra::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
transform: translate(0%, -50%);
background-image: radial-gradient(rgba(0,0,0,0.65) 0%, transparent 70%, transparent 100%);
}
.sombra.scale::after {
transform: translate(0%, -50%) scaleY(0.5);
}
<div class="sombra"></div>
<div class="sombra scale"></div>