Important Note: There have been previous discussions on creating hard-stop gradients, which is why I refrained from posting my initial comment as an answer. However, during the search for duplicates, I realized there might be a more effective approach to address your issue. Hence, I am sharing an alternative solution in the form of this answer.
Query: What causes the fade out and blend to white?
To clarify before delving into the alternate method, the gradient specified can be interpreted by the User Agent (UA) in the following manner:
- With the first parameter as
to right, the gradient commences from the left (i.e., 0% positioned at the left).
- From 0% to 50% (from the left edge to halfway across), the gradient color is solid red.
- The transition from red to white occurs between 50% and 51%, where the color slowly shifts from red to white, blending with the white on the opposite side.
- Between 51% and 100% (marginally past the halfway mark towards the right edge), the color transitions to pure white.
The 50%-51% gap is typically utilized for diagonal or angled gradients to prevent jagged edges. For normal horizontal or vertical gradients, such as yours, this intermediary step is unnecessary.
If you aim to adjust the color stop points as shown below for 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 */
However, instead of altering the color stop points, there exists a superior technique.
Suggested Method and Rationale:
An optimal strategy involves maintaining a consistent color for the gradient, usually solid red, while controlling its width using the background-size property. As evidenced in the demonstration below, this approach yields results akin to modifying the color stop points.
This methodology proves advantageous when animating or transitioning the background, given that background-size supports smooth transitions whereas direct color stop changes lack this capability. The demo showcases the difference upon hovering over each cell.
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background: linear-gradient(red,red); /* utilize preferred color */
background-repeat: no-repeat; /* retain setting */
border: 1px solid; /* visual aid for cell width */
}
.Column:nth-child(1) {
width:20%;
background-size: 100% 100%; /* adjust first value for width customization */
}
.Column:nth-child(2) {
width:50%;
background-size: 75% 100%; /* adjust first value for width customization */
}
.Column:nth-child(3) {
width:30%;
background-size: 50% 100%; /* adjust first value for width customization */
}
/* for demonstration purposes */
.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%; }
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
Technique for Changing Fill Direction:
You can initiate the fill from the right-hand side of the cell opposed to the traditional left-side start by adjusting the background-position attribute to right, as illustrated in the subsequent code snippet:
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background: linear-gradient(red,red); /* utilize preferred color */
background-repeat: no-repeat; /* retain setting */
background-position: right;
border: 1px solid; /* visual aid for cell width */
}
.Column:nth-child(1) {
width:20%;
background-size: 100% 100%; /* adjust first value for width customization */
}
.Column:nth-child(2) {
width:50%;
background-size: 75% 100%; /* adjust first value for width customization */
}
.Column:nth-child(3) {
width:30%;
background-size: 50% 100%; /* adjust first value for width customization */
}
/* for demonstration purposes */
.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%; }
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>