Partial Background Color Change Of Table-cell - Gradient Issue

In this design I need the red background color of each cell partially changed say the first cell 100% second cell 100% and the third cell 50%. Update: I have made a change where ce

Solution 1:

Note: There are already few questions regarding hard-stop gradient creation which is why I didn't post my earlier comment as an answer but while searching for a duplicate I figured out there might be a better way to tackle your problem and hence posting the alternate approach as an answer.

Why is there a fade out and blend to white?

Let me get this out of the way before explaining the alternate approach (just for completeness sake). The gradient that you have defined would be interpreted by the UA as follows:

• Since the first param is to right, the gradient starts at left (that is 0% is at left).
• From 0% to 50% (that is, from left edge till half way), the color of the gradient is a solid red.
• Red ends at 50% and white starts only at 51% as per gradient definition and so between 50 - 51% the color slowly changes from red to white (and blends with the white on the other side).
• From 51% to 100% (that is, from slightly past half way till the right edge), the color is pure white.

This gap between 50% to 51% is generally used for diagonal (or angled) gradients where sharp stops result in jagged (uneven) edges but for normal horizontal or vertical gradients it won't be needed.

Now, I assume that you are trying to change the color stop points like below in order to get partial fill:

background: linear-gradient(to right, red 50%, white 50%); /* for a 50% fill */background: linear-gradient(to right, red 75%, white 75%); /* for a 75% fill */

But there is a better way to do this than change the color stop points.

---

What is the better way and why?

A better option would be the one in the below snippet where the color never really changes. Gradient is just a solid red color always but we control it's size/width using background-size property. As you can see in the demo below, this is as effective as changing the color stop points.

This method is more advantageous when you want to animate/transition the background because the background-size is a transitionable property whereas the gradient image's color stop point change is not. You can see what I mean in the below demo. Just hover on each cell and see what happens.

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background: linear-gradient(red,red); /* use the color you need */background-repeat: no-repeat; /* dont change */border: 1px solid; /* just to show cell width */
}

.Column:nth-child(1) {
  width:20%;
  background-size: 100%100%; /* change first value for width change */ 
}
.Column:nth-child(2) {
  width:50%;
  background-size: 75%100%; /* change first value for width change */
}
.Column:nth-child(3) {
  width:30%;
  background-size: 50%100%; /* change first value for width change */
}

/* just for demo */.Column { transition: all 1s; }
.Column:nth-child(1):hover { background-size: 50%100%; }
.Column:nth-child(2):hover { background-size: 100%100%; }
.Column:nth-child(3):hover { background-size: 75%100%; }

<divclass="Row"><divclass="Column">C1</div><divclass="Column">C2</div><divclass="Column">C3</div></div>

How to change direction of the fill?

We can make the fill start from the right hand side of the cell instead of the left hand side by setting the background-position as right to the cells like in the below snippet:

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background: linear-gradient(red,red); /* use the color you need */background-repeat: no-repeat; /* dont change */background-position: right;
  border: 1px solid; /* just to show cell width */
}

.Column:nth-child(1) {
  width:20%;
  background-size: 100%100%; /* change first value for width change */ 
}
.Column:nth-child(2) {
  width:50%;
  background-size: 75%100%; /* change first value for width change */
}
.Column:nth-child(3) {
  width:30%;
  background-size: 50%100%; /* change first value for width change */
}

/* just for demo */.Column { transition: all 1s; }
.Column:nth-child(1):hover { background-size: 50%100%; }
.Column:nth-child(2):hover { background-size: 100%100%; }
.Column:nth-child(3):hover { background-size: 75%100%; }

<divclass="Row"><divclass="Column">C1</div><divclass="Column">C2</div><divclass="Column">C3</div></div>

Solution 2:

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background-color: red;
  background: linear-gradient(to right, red, white);
  
}

.Column:nth-child(1) {
  width:20%;
}
.Column:nth-child(2) {
  width:50%;
}
.Column:nth-child(3) {
  width:30%;
}

<divclass="Row"><divclass="Column">C1</div><divclass="Column">C2</div><divclass="Column">C3</div></div>

Look this