动态阴影

<style>
  .dynamic-shadow-parent {
    position: relative;
    z-index: 1;
  }

  .dynamic-shadow {
    position: relative;
    width: 10rem;
    height: 10rem;
    background: linear-gradient(75deg, #6d78ff, #00ffb8);
  }

  .dynamic-shadow::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    top: 0.5rem;
    filter: blur(0.4rem);
    opacity: 0.7;
    z-index: -1;
  }
</style>

<!-- 
  创建与类似的阴影box-shadow 
  基于元素本身的颜色的阴影。
-->
<div class="dynamic-shadow-parent">
  <div class="dynamic-shadow"></div>
</div>

阴影

<style>
  .triangle{
    margin-top: 25px;
    width: 200px;
    height: 60px;
    position: relative;
    filter: drop-shadow(0 0 5px #ccc);
    background-color: #fff;
  }
  .triangle:after{
    content: "";
    position: absolute;
    left: 20px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    transform: rotate(45deg);
  }
</style>

<div class="triangle"></div>