在图像后创建CSS光栅

我正在构建一个颜色选择器，它在图像上使用CSS渐变。我有一个用于HSB颜色选择的CSS渐变，但我无法为HSB颜色选择创建CSS渐变。您可以在以下位置看到原始渐变：

渐变1应该看起来像渐变2。是否可以只使用css来实现这一点？我尝试了几件事，包括径向梯度，但运气不好

以下是我正在使用的css和标记：

#red_grad {
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 0, 0, 1)) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left center, right center, from(rgba(255, 255, 255, 1)), to(rgba(255, 0, 0, 1)));
    height: 262px;
    width: 262px;
}
#black_grad {
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1), transparent) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, center bottom, center top, from(rgba(0, 0, 0, 1)), to(transparent)) repeat scroll 0 0 transparent;
    height: 262px;
    width: 262px;
}

<div id="red_grad">
    <div id="black_grad">
    </div>
</div>

#红色#渐变{
背景：-moz线性渐变（0度，rgba（255，255，255，1），rgba（255，0，0，1））重复滚动0 0透明；
背景：-webkit渐变（线性，左中，右中，从（rgba（255，255，255，1））到（rgba（255，0，0，1））；
高度：262px；
宽度：262px；
}
#黑度{
背景：-moz线性渐变（90度，rgba（0,0,0,1），透明）重复滚动0 0透明；
背景：-webkit渐变（线性、中底、中顶、从（rgba（0,0,0,1））到（透明））重复滚动0 0透明；
高度：262px；
宽度：262px；
}

---

您可以在

上看到它。HSL饱和亮度平面可以由两个线性渐变组成：

亮度：白色到透明到黑色（水平梯度）

饱和度：完全饱和的颜色到灰色（#808080）（垂直梯度）

这里有一把小提琴：

注:

• 你在第一个问题上犯了错误，让你困惑的是，你认为每个渐变只有两个颜色停止。如您所见，它们比这更灵活：）
• 为什么亮度渐变为4色而不是3色？因为透明实际上映射到rgba（0,0,0,0），所以透明到白色的渐变不是您所期望的
• 在CSS3中你不需要2个元素，你可以在一张图像中有多个背景，所以我删除了额外的元素。；）

---

改变色调怎么样？只需将

红色

替换为新颜色的完全饱和版本（色调=任何颜色，饱和度=100，亮度=50）--这就是你的颜色选择器

谢谢你，莉亚，这太棒了。我试过很多东西，从径向渐变到画布，但都做不到。期待今年在媒体上见到你。我给你一杯啤酒。。。再次感谢！很高兴我能帮忙。：）你要来@media？别忘了过来打个招呼：）当然，去年去过那里，很喜欢。我一定会打招呼的。谢谢