带有 CSS Webkit 渐变的角度渐变？答案

【问题标题】：Angular Gradients with CSS Webkit Gradients?带有 CSS Webkit 渐变的角度渐变？
【发布时间】：2018-04-17 10:06:38
【问题描述】：

是否可以生成类似于这种样式的颜色选择器的渐变？完全饱和的 50% 亮度值位于外侧，向内侧则达到 100% 亮度。

https://i.imgur.com/UlssX5h.jpg

【问题讨论】：

标签： css colors gradient color-picker

【解决方案1】：

给你。

html, body {margin:0; width:100%; height:100%; background: black}
.colorpicker {
  width:100vmin; height:100vmin; margin:0 auto;
  border-radius:100%;
  background:
     linear-gradient(0deg, #00F, rgba(255, 255,255,0), rgba(255, 255,255,0))
   , linear-gradient(60deg, #0FF, rgba(255, 255,255,0), rgba(255, 255,255,0))
   , linear-gradient(120deg, #0F0, rgba(255, 255,255,0), rgba(255, 255,255,0))
   , linear-gradient(180deg, #FF0, rgba(255, 255,255,0), rgba(255, 255,255,0))
   , linear-gradient(240deg, #F00, rgba(255, 255,255,0), rgba(255, 255,255,0))
   , #FFF linear-gradient(300deg, #F0F, rgba(255, 255,255,0), rgba(255, 255,255,0))
}

&lt;div class="colorpicker"&gt;&lt;/div&gt;

【讨论】：