css - Angular 渐变与 CSS Webkit 渐变？

Question

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

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

Answer 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))
}

<div class="colorpicker"></div>