CSS 웹킷 그라디언트가있는 각도 그라디언트?

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>