我怎样才能在我的六边形的右边添加一个彩色阴影？

.hexagon {
  width: 100px;
  height: 100px;
  background-color: #ff0000; /* 设置六边形的颜色 */
  position: relative; /* 使阴影相对于六边形定位 */
  transform: rotate(30deg); /* 旋转六边形使其成为菱形 */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); /* 使用clip-path创建六边形 */
}

.hexagon::after {
  content: ""; /* 为伪元素添加内容以实现阴影效果 */
  position: absolute; /* 将阴影相对于六边形定位 */
  top: 0;
  right: -10px; /* 调整右边阴影的位置 */
  width: 10px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置阴影的颜色和透明度 */
  transform: skewX(-30deg); /* 将阴影倾斜以与六边形对应 */
  z-index: -1; /* 将阴影放置在六边形下方 */
  filter: blur(5px); /* 可选：添加模糊效果以增加阴影的柔和度 */
}

<div class="hexagon"></div>