0
  background: linear-gradient(to right, green 0%, green 33.3%, blue 33.3%, blue 66.7%, white 66.7%, white 100%);
  background-size: 300%;
  background-position: 50%;

  transition: left, background-position 0.5s;

I want to transition between 3 different colors but I can't understand how this works. By changing background-position to 0% displays green, 50% displays blue and 100% displays white.

With my knowledge, because viewport is 100%, setting background-position to 50% should either show little bit of blue and rest as white(50% of 300% = 150% point) or most as green and little bit of blue(absolute position of 50% in total 300%).

How is this happening?

shapeless
  • 175
  • 1
  • 10
  • What you have is not really a gradient as you are specifying colors on each percentage change ie: `green 33.3%, blue 33.3%`, this is just a change in color with no blend, is this your intended outcome? `background: linear-gradient(to right, green 0%, blue 50%, white 100%);` is this your intention? – dale landry Feb 01 '21 at 03:09
  • @dalelandry Yep I don't want colors to blend. I want 3 different color sections and I will be moving around by changing `background-position`. But I can't understand how `background-position` is working – shapeless Feb 01 '21 at 04:33

0 Answers0