Search code examples
csscolorsgradientcolor-picker

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

Solution

  • 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>