Skip to content
Related Articles

Related Articles

CSS cross-fade Property

Improve Article
Save Article
Like Article
  • Last Updated : 16 Jul, 2020

The cross-fade property is used to form a kind of a 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 not 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.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width,
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
#box{
    width: 250px;
    height: 150px;
    /* 15 parts of black and 85 parts of white */
    background-image: -webkit-cross-fade(
      url(
      ,url(
      ,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.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, 
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
#box{
    width: 250px;
    height: 150px;
    /* 15 parts of black and 85 parts of white */
    background-image:
    -webkit-cross-fade(
    url(
    url(
    0%);
}
</style>
<body>
  <h1>Cross-fade at 0%</h1>
  <div id="box">
  </div>
</body>
</html>

Output:

Supported Browsers:

  • Firefox 3.0
  • Edge
  • Chrome
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!