CODEWITHSUNDEEP
csscolorsgradientcolor-picker
cclloyd
cclloyd

Reputation: 9225

Angular Gradients with CSS Webkit Gradients?

Is it possible to generate a gradient similar to this style of color picker? Where the full saturated, 50% brightness values are on the outside, and towards the inside it goes to 100% brightness.

https://i.sstatic.net/ohuF4.jpg

Upvotes: 0

Views: 756

Answers (1)

Mr Lister
Mr Lister

Reputation: 46629

Here you go.

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>

Upvotes: 2

Related Questions