如何使用渐变和叠加混合模式创建图像？

Question

我有下一个任务：

从服务器，我得到一种颜色的十六进制值。 然后我需要使用这个值制作一张图片。 为此，需要使用构建渐变的规则。 有两层。 第一层在这个十六进制中有一个背景颜色，但它也必须处于混合模式：叠加。 在它上面叠加了一个具有三种颜色渐变的图层。 起始颜色 - 不透明度为 0% 的十六进制，中心颜色 - 不透明度为 80% 的 #000000，结束颜色 - 不透明度为 100% 的十六进制。

我不知道如何做到这一点。

编辑：我需要类比来自网络的代码：

div {
    width: 300px;
    height: 300px;
    background: #ffd700;
    position: absolute;
    mix-blend-mode: overlay;
    z-index: 1;
    
}
#div2 {
  z-index: 2;
  background: linear-gradient(297deg, #ffd700 0%, rgba(0,0,0,.7) 80%, #ffd700 100%);
}