linear-gradient syntax unclear

Such gradient means a solid color placed at left with a size equal to 0. 0 is equivalent to 0 auto and auto will default to 100%. So a gradient having 0 width and 100% height.

The 3 parameter is a color having 2 color stops. red 0 100% means a gradient having red at 0 and red at 100%. You can also use red 0 0.

Here is an example to better understand. The background will go from 0 to 100%

.box {
 background: 
   linear-gradient(red 0 0) 
   left / 
   0  
   no-repeat;
  height:100px;
  transition:.5s;
}
.box:hover {
  background-size:100%;
}

<div class="box"></div>

An easier syntax would be:

.box {
  background-image: linear-gradient(red, red);
  background-position: left;
  background-size: 0 100%;
  background-repeat: no-repeat;
  height: 100px;
  transition: .5s;
}

.box:hover {
  background-size: 100% 100%;
}

<div class="box"></div>

linear-gradient syntax unclear

Related

Recent Posts