Box-shadow on the reflected element

When hovering over an element, the box-shadow property is correctly applied to the main element (the one on top). However, the reflected element ends up with an unattractive square border because it cannot identify box-shadow as a light scattering property. How can I remove this semi-transparent square border from the reflected element and make its reflection look nice?

body {
  min-height: 100vh;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.codetheworld-io {
  display: flex;
}

a {
  margin: 0 10px;
  border-radius: 50%;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.5s;
  font-size: 2.5em;
  color: var(--color);
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

}

a:hover {
  background: var(--color);
  color: #000;
  box-shadow: 0 0 5px var(--color), 0 0 25px var(--color), 0 0 50px var(--color), 0 0 200px var(--color);
}

<div class="codetheworld-io">
  <a href="#" style="--color: #0072b1">
    <i class="fa-brands fa-linkedin-in"></i>
  </a>
  <a href="#" style="--color: #E1306C">
    <i class="fa-brands fa-instagram"></i>
  </a>
  <a href="#" style="--color: #FF0050">
    <i class="fa-brands fa-tiktok"></i>
  </a>
  <a href="#" style="--color: #4267B2">
    <i class="fa-brands fa-facebook-f"></i>
  </a>
</div>
<script src="https://kit.fontawesome.com/a6d498a7e3.js" crossorigin="anonymous"></script>

Solution

You cannot really "remove" the square box, since the reflection isn't a proper element and it's rendering is limited to the size of your origin-element.

You can only try to contain your shadow within the origin-elemnt of the reflection.

To achieve this you will need an additional wrapper around the element you have your effects on (a-tag in your case).

You can add padding to this wrapper and use this bigger container to reflect your actual element + effects. You would need to cut back on some of your box-shadow spread for that to still properly work.

I added an example as snippet, but the reflection doesn't seem to work within the preview, so here is a jsfiddle with a working example:

JSFiddle

body {
    min-height: 100vh;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.codetheworld-io {
    display: flex;
}
.wrapper{
    padding:25px;
    margin-left:-25px;
    margin-right:-25px;
    -webkit-box-reflect: below -25px linear-gradient(transparent, white);
}
a {
    margin: 0 10px;
    border-radius: 50%;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: 0.5s;
    font-size: 2.5em;
    color: var(--color);

}

a:hover {
    background: var(--color);
    color: #000;
    box-shadow: 0 0 5px var(--color), 0 0 25px var(--color), 0 0 25px var(--color), 0 0 20px var(--color);
}

<div class="codetheworld-io">
    <a href="#" style="--color: #0072b1">
        <i class="fa-brands fa-linkedin-in"></i>
    </a>
    <a href="#" style="--color: #E1306C">
        <i class="fa-brands fa-instagram"></i>
    </a>
    <a href="#" style="--color: #FF0050">
        <i class="fa-brands fa-tiktok"></i>
    </a>
    <a href="#" style="--color: #4267B2">
        <i class="fa-brands fa-facebook-f"></i>
    </a>
</div>
<script src="https://kit.fontawesome.com/a6d498a7e3.js" crossorigin="anonymous"></script>