Comment ajouter une ombre de boîte à webkit-box-reflect?

J'essaie d'ajouter une ombre au reflet de mon bouton ci-dessous. J'ai ajouté une photo du bouton à cette question. J'espère qu'il y a une solution:)

Bouton HTML

[![CSS
/* From uiverse.io by @SylviaMakuch */
button {
 font-family: monospace;
 font-size: large;
 height: 2.5em;
 width: 7.0em;
 border-radius: 1.875em;
 background: radial-gradient(#c2fcff, #03e9f4);
 color: #050801;
 border: 0em;
 cursor: alias;
 box-shadow: 0 0 0.313em #03e8f4, 0 0 0.313em #03e9f4, 0 0 0.313em #00f2ff,
 0 0 50px #03e9f4;
 -webkit-box-reflect: below 0 linear-gradient(transparent, #0005);
}
button:hover {
 box-shadow: 0 0 0.313em #03e9f4, 0 0 1.7em #03e9f4, 0 0 #03e9f4,
 0 0 150px #03e9f4;
}][1]][1]

Merci!

Solution du problème

Ce dont vous avez besoin est un élément DIV qui fournit un dégradé au-dessus de l'image ci-dessous.

Puisque l'élément DIV est en dessous de l'image, nous pouvons rendre sa position relative et fournir une marge négative, de la même hauteur que l'image, afin que le DIV puisse se déplacer au-dessus de l'IMAGE.

Assurez-vous que la marge négative a la même hauteur que l'image mais en négatif.

body {
 background: black;
}
img {
 content:url(https://freepngimg.com/thumb/click_here/5-2-click-here-png-pic.png);
}
.size {
 width: 180px;
 height: 66px;
}
.block {
 display: block;
 padding: 0;
 margin: 0;
}
.flip-vertically {
 transform: scaleY(-1);
}
.fade-gradient {
 background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
 margin-top: -66px;
 position: relative;
}

<img id="top" class="size block">
<img id="bottom" class="size block flip-vertically">
<div class="size fade-gradient"></div>