Limited support Use with care and confirm browser support before shipping it to all users.

cross-fade()

The cross-fade() CSS function can be used to blend two or more images at a defined transparency. It can be used for many basic image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.

Units and functionsVisual styling

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.image.cross-fade
17
79
10
18
9.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
  • Supports the original dual-image with percentage implementation only.
Compatibility
  • See bug 40470742 for supporting the unprefixed `cross-fade()` function.
Notes 2 item(s)
Implementation note
  • Supports the original dual-image with percentage implementation only.
Compatibility
  • See bug 40470742 for supporting the unprefixed `cross-fade()` function.
Notes 2 item(s)
Implementation note
  • Supports the original dual-image with percentage implementation only.
Compatibility
  • Available with a vendor prefix: -webkit- (5.1)
Notes 2 item(s)
Implementation note
  • Supports the original dual-image with percentage implementation only.
Compatibility
  • See bug 40470742 for supporting the unprefixed `cross-fade()` function.
Notes 3 item(s)
Implementation note
  • Support for the original dual-image with percentage implementation only.
  • Supports the original dual-image with percentage implementation only.
Compatibility
  • Available with a vendor prefix: -webkit- (5)

Syntax

CSS 
.element {
  background-image: cross-fade(
    url(image1.png) 75%,
    url(image2.png)
  );
}

Live demo

75%/25%blend

CSS 75%/25%blend demo.

PreviewFullscreen

50%/50%blend

CSS 50%/50%blend demo.

PreviewFullscreen

Color and. blend

CSS Color and. blend demo.

PreviewFullscreen

Use cases

  • Use cross-fade()

    Use cross-fade() when the default CSS behavior is not expressive enough for the component or layout you are building.

  • Handle edge cases

    Apply cross-fade() to solve a specific styling constraint without introducing broader layout or behavior changes.

Cautions

  • Test cross-fade() in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Confirm that using cross-fade() does not make content harder to perceive, understand, or operate in assistive contexts.

Related links