<div class='below'></div>
<!-- <div class='above'>above</div> -->
<!-- <div class='right'></div> -->
<!-- <div class='left'>left</div> -->
xxxxxxxxxx
div {
margin: 50px auto 200px;
width: 160px;
height: 222px;
background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
background-size: cover;
}
.below {
box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
}
.left {
box-reflect: left;
}
.right {
box-reflect: right 10px;
}
.above {
box-reflect: above;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.