cross-fade()
The cross-fade() CSS function generates an image by mixing two images. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The cross-fade() CSS function generates an image by mixing two images. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
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
Powered by web-features