It’s evident that solid demarkation of yellow is not properly faded
How to make it decently fade when I add an offset?
html::before {
content: "";
display: block;
position: sticky;
top: 0;
border-top: 50px solid yellow;
border-image: linear-gradient(to bottom, yellow 40%, transparent) 120;
}
1
Theory
Our eyes are very good at detecting changes. To a computer, you’ve created a smooth linear gradient from “none” to “all the way”, that just happens to reach 100% before it reaches the shape edge. But our eyes detect that the smooth gradient suddenly stopped changing. To compensate, you have to gradually slow down the linear rate of change.
Of course the linear-gradient function can only approximate a changing rate of change, so a little experimentation will be required.
Giving yourself more distance over which to make the change also helps distribute the changes better. That might mean lowering the 40% barrier, or increasing the border width, or both.
Mechanics
If you use a dimension value (e.g, 20%) without a color value, the linear-gradient CSS function assumes the color value is 50% of the way between the two color stops around it.
In the example below, I use more of the width to perform the transition, and spend more of the distance transitioning between solid and halfway than I do between halfway and transparent.
Example
html::before {
/* ... */
--solid-at: 20%;
--transparent-at: 100%;
--speedup: 135%;
--diff: calc( var(--transparent-at) - var(--solid-at) );
--mid-diff: calc( var(--diff) * 0.5 );
--adjusted-mid: calc( var(--mid-diff) * var(--speedup) );
border-image:
linear-gradient( to bottom,
yellow var(--solid-at),
var(--adjusted-mid),
transparent var(--transparent-at)
) 120;
}
This equates to solid yellow at 20%, half-transparent at 74% (instead of 60%), and fully transparent at 100%.