CSS cross-fade() Function

div {
  background-image: cross-fade(
    url('blue-cross-line.png'),
    url('green-cross-line.png'),
    75%);
}

Meaning

The cross-fade() css function sets blend two or more images at a defined transparency.

Version: CSS3

Standard Syntax

/* webkit vender Syntax */
-webkit-cross-fade(url('URL'), url('URL'), %);

/* Standard Syntax */
cross-fade(url('URL'), url('URL'), %);

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Note:

• All browser implemented with the vendor prefix: -webkit-
• Support for the original dual-image with percentage implementation only.

Status

Function Arguments

The following table describes the arguments of this function.