CSS cross-fade Property

Last Updated : 08 Jun, 2023

The cross-fade property is used to form a kind of blend between two given images. In simple words, it is used to mix to images into one another in terms of percentage.

Syntax:

cross-fade( <image, <image>, <percentage> )

Property value:

It has no property values, instead, it takes two images and a number indicating the amount of blending required.

Example 1: cross-fade at 0% where the first image is white and the second image is black then blending is done in such a way that there is 85 parts of the white image and 15 parts of black.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>CSS cross-fade Property</title>
</head>
<style>
    #box {
        width: 250px;
        height: 150px;
        /* 15 parts of black and 85 parts of white */
        background-image: -webkit-cross-fade(
            url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200714125439/w-200x141.JPG"), 
            url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200714125445/b-300x173.JPG"), 15%);
    }
</style>
 
<body>
    <h1>Cross-fade</h1>
    <div id="box">
    </div>
</body>
</html>

Output:

Example 2: cross-fade at 0% where the first image is black and the second image is white then blending is done in such a way that there is 0 parts of the white image and 100 parts of black.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                initial-scale=1.0">
    <title>CSS cross-fade Property</title>
</head>
<style>
    #box {
        width: 250px;
        height: 150px;
        /* 15 parts of black and 85 parts of white */
        background-image:
            -webkit-cross-fade(
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200714125445/b-300x173.JPG"),
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200714130459/01.JPG"),0%);
    }
</style>
 
<body>
    <h1>Cross-fade at 0%</h1>
    <div id="box">
    </div>
</body>
</html>