如何在CSS/SVG中创建逼真的光泽效果?

.matte{
  width: 150px;
  height: 150px;
  background-color: black;
}
 .finish{
   background: -moz-linear-gradient(top, rgba(124,124,124,0.5) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(124,124,124,0.5) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(124,124,124,0.5) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   width: 100%;
   height: 100%;
   opacity: 0.3;
   filter: blur(10px)
}

<div class="matte">
  <div class="finish">
  
  </div>
</div>