Repository: w3c/csswg-drafts

Issue #1332: [css-images] Add easing functions to color stops
Created: 2017-05-08T16:10:40Z
A recent CSS-Tricks article (https://css-tricks.com/easing-linear-gradients/) and subsequent Twitter discussion (https://twitter.com/stubbornella/status/861603397677359104) spurred me to file this request for Level 4.
In summary, linear gradients are not always visually acceptable.  This is particularly true when “fading out” a dark color to transparent.  The article describes how to set up a bunch of color stops to ease out the gradient.  A much better solution would be to add easing functions to all color stops after the first, with a linear default for backward compatibility.
The example in the article could be approximated like this:
linear-gradient(to bottom, black 0%, transparent 100% ease-in-out);

…instead of the 11 color stops used to get the effect.  (Note that I don’t claim this would be a precise match; a cubic-bezier() easing would most likely be required for that.  But it would be close.)
This would change the definition of <color-stop> (https://drafts.csswg.org/css-images-3/#typedef-color-stop) from:
<color-stop> = <color> <length-percentage>?

…to the following at a minimum:
<color-stop> = <color> <length-percentage>? <timing-function>?

As an author, I would probably prefer:
<color-stop> = <color> [ <length-percentage> || <timing-function> ]?

…since that would allow me to write the easing and distance in whichever order I liked.  (For that matter, I’d prefer to be able to write all three in any order, but I don’t know if that would upset any implementors’ apple carts.)

Duplicate issue #3935: [css-easing] The `midpoint` easing function
Created: 2019-05-15T11:15:51Z
Insofar as easing functions make it into the CSS gradient syntax, I would like to propose a new easing function, tentatively called midpoint(x), for smooth interpolation between color stops, without the drawbacks of the interpolation hints syntax.

In the css-images-4 spec, interpolation hints seem to affect how color stops are positioned, and at least current browser interpretations adhere to that reading of the spec.
The proposal to add easing functions to gradients (in particular, the syntax analogous to adding hints between color stops) promises to disentangle the interpolation functions from color stop position computations.

To enable authors to obtain an intuitive effect from interpolation hints without the drawbacks outlined in (1) and without retroactively redefining the behavior of interpolation hints, we can piggy-back on the easings proposal (2) to present authors with similar functionality.
The midpoint easing function takes a single argument x ∈ [0, 1] that controls the relative position of the midpoint between the two color stops A and B. The resulting color is computed (by following the interpolation hint definition) as follows:

if x = 0, return color B for any point between the two color stops (equivalent to step-start)
if x = 1, return color A for any point between the two color stops (equivalent to step-end)
if x ∈ (0, 1):

compute the position t ∈ [0, 1] of the point, relative to the two color stops
obtain the weighting between color stops C = tlogx(.5)
the color at the point is then a linear blend between the colors of the two color stops, blending (1 - C) of the first stop and C of the second stop.


the particular case x = 0.5 is equivalent to linear

These two definitions are equivalent:
linear-gradient: (to right, red, 25%, green);
linear-gradient: (to right, red, midpoint(0.25), green);
I have opted for x ∈ [0, 1] instead of x ∈ [0%, 100%] to make it clear that the value is local to the easing function, and not a position along the gradient line.

Closing comment (2019-05-24T10:39:38Z): What I mean that, reading the spec and trying to implement the color stop positioning algorithm outlined in it — with my understanding on it, and lacking other context to its history — I was surprised to find current browsers have a different approach. (Hence my question in #3931).

Are authors complaining about the positioning algorithm?

I'm not aware of anything of the sort. I chanced upon it writing some test cases for an implementation I'm working on. Might be an edge-case to mix unpositioned color stops with interpolation hints in the same gradient and, even then, seeing that browsers render it consistently, as an author you might be inclined to accept it as-is. (As such, I think the resolution to pave the cowpaths in this regard is appropriate.)
This proposal (a midpoint easing function) was a thought (or compromise, if you will) to align what I think is the spirit behind interpolation hints in a way that does not affect how browsers currently implement them. That being said, it's a proposal that's dependent on, and a supplement to, easing functions in gradients — for which the rationale is being tracked in #1332.