效果预览

思路图解

如上图

1. 假设红色区域为需要添加阴影的盒子。
2. 黄色区域为渐变阴影区域。
3. 我们只要切割出蓝色边框和红色边框之间的区域，再为其设置偏移量，即可实现彩色的阴影。

主要知识点

1. 制作渐变的阴影
   1. 通过conic-gradient 设置锥形渐变
   2. 通过filter: blur() 设置模糊滤镜
2. 裁剪出阴影区域，即蓝色边框和红色边框之间的区域 可通过clip-path: polygon() 裁剪出可见区域来实现

html结构

<div class="gradientShadowC"> </div>

less代码

.gradientShadowC{
  position: relative;
  height: 200px;
  width: 200px;
  margin: 20px;
 
  &::after{
    --xOffset: 5px;
    --yOffset: 5px;
    --blur: 5px;
    position: absolute;
    content: '';
    height: calc(100% - var(--blur));
    width: calc(100% - var(--blur));
    top: var(--xOffset);
    left: var(--yOffset);
    filter: blur(var(--blur));
    padding-top: 10px;
    padding-left: 10px;
    background-image: conic-gradient(red,blue,yellow,green,gray,purple);
    background-clip: content-box;
    z-index: -1;
    clip-path: polygon(
                      -100vmax -100vmax,
                      100vmax -100vmax,
                      100vmax 100vmax,
                      -100vmax 100vmax,
                      calc(0px - var(--xOffset))  calc(100% - var(--yOffset)),
                      calc(100% - var(--xOffset)) calc(100% - var(--yOffset)),
                      calc(100% - var(--xOffset)) calc(0px - var(--yOffset)),
                      calc(0px - var(--xOffset)) calc(0px - var(--yOffset)),
                      calc(0px - var(--xOffset))  calc(100% - var(--yOffset)),
                      -100vmax -100vmax
                );
  }
}