Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.

Intent to prototype: cross-fade

Skip to first unread message

Zeke Medley

Jul 14, 2020, 6:15:31 PM7/14/20

cross-fade is a CSS function part of the CSS Image Module Level 4.
cross-fade allows for the blending of multiple CSS images with varying
opacities. For example:

cross-fade(url(“foo.jpg”) 50%,

radial-gradient(circle, transparent 50%, black 150%) 50%);

might be used to add a vignette effect to an image.

Bug link:


Platform coverage: all

DevTools bug: none

Preference: layout.css.cross-fade.enabled

Other browsers:

There is an older, implemented syntax. In Safari it is unprefixed and in
Blink based browsers it is behind the -webkit prefix. This older version
only supports two images at a time and has incompatible syntax with the
version in the spec. See this
<> MDN article
for more information about how the older implementation differs from the
specified one. According to Can I Use
<> and our own queries on
httparchive <> this older syntax has very little

As it receives little usage and does not align with the current cross-fade
spec we will implement the newer cross-fade syntax according to the CSSWG
specification. As the older syntax will not parse this is unlikely to
produce unexpected results for the very limited number of webpages
currently using the older cross-fade. For all intents and purposes, if a
website still uses the older syntax the status quo will remain in effect as
Firefox will continue to not implement their cross-fade.

Webkit bug 179942 <> seems to
track this syntax mismatch.

web-platform-tests: Will be implemented as part of bug 546052

Secure Contexts: Enabled in secure contexts, like other similar CSS features
Is this feature enabled by default in sandboxed iframes? yes

Jeff Muizelaar

Jul 14, 2020, 6:18:42 PM7/14/20
to Zeke Medley, Mozilla
Have other browsers expressed an interest in implementing the new syntax?
> _______________________________________________
> dev-platform mailing list

Jul 14, 2020, 7:26:08 PM7/14/20
Common implementations of crossfade just interpolate the opacity of both images, leading to the background "leaking through" for a portion of the fade. On a white background, this is a "flash".

If this features gets traction, it is an opportunity to make the "right" way the "easy" way. A crossfade between two opaque images, should always be opaque.

Good luck! Cheering from the sidelines!

Let me know if I can clarify further.

Jeff Muizelaar

Jul 14, 2020, 7:53:48 PM7/14/20
to, Mozilla
Do Chrome and Safari do it the right way?

Jul 14, 2020, 8:06:10 PM7/14/20
On Tuesday, 14 July 2020 16:53:48 UTC-7, Jeff Muizelaar wrote:
> Do Chrome and Safari do it the right way?


Yes. On both counts.

I'll show myself out.
0 new messages