{"id":389293,"date":"2025-10-02T08:50:21","date_gmt":"2025-10-02T14:50:21","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=389293"},"modified":"2025-10-02T08:50:24","modified_gmt":"2025-10-02T14:50:24","slug":"cross-fade","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/functions\/c\/cross-fade\/","title":{"rendered":"cross-fade()"},"content":{"rendered":"\n

The CSS cross-fade()<\/code> function blends background and masked images at a specified transparency value. In other words, it’s like bleeding one image into another, sort of like you are transitioning between two images that are stacked on one top of the other, transposing the two.<\/p>\n\n\n\n

You can use it anywhere an\u00a0<image><\/code>\u00a0is an accepted value, including the background-image<\/a><\/code>, mask-image<\/a><\/code> and content<\/a><\/code> properties. And, yes, we can add fade between two or more images or colors. We aren’t limited to just two.<\/p>\n\n\n\n\n\n\n\n

\/* Cross-fade between a CSS gradient and an image file *\/\n.scene {\n  background-image: -webkit-cross-fade(\n    conic-gradient(\n      from -110deg at 50% 0%,\n      rgb(120, 255, 210),\n      rgb(170, 130, 255),\n      rgb(40, 100, 255),\n      rgb(120, 255, 210)\n    \/* Fade by this much *\/\n  ) 60%,\n    url(\".\/mountains.svg\")\n    \/* Fade by this much *\/\n    40%\n  );\n}<\/code><\/pre>\n\n\n\n
Note:<\/strong> See that funny -webkit<\/code> prefix? That’s called a “vendor prefix”<\/a> which is often used when browser are experimenting with a feature that isn’t quite done. That means we have to use the prefix in order to use the the cross-fade()<\/code> function where it is currently supported, which is Safari. We won’t need to use the prefix once the feature is broadly supported.<\/p>\n\n\n\n
Think of it like a weighted mix where we determine how much each image is faded. We determine that with a percentage, where by default, each image is an even 50%<\/code>. That means we could make one image more transparent at, say, 60%<\/code>, and the other less transparent at 40%<\/code> just like the example above.<\/p>\n\n\n\n
You might think this is a lot like using the\u00a0opacity<\/a><\/code> property, and yes, it sort of is like that. We can indeed position one image on top of the other, then apply different opacity<\/code> values for each one. However, what’s really happening with cross-fade()<\/code> is that it outputs a single image<\/em> from the two images you supply it. So, in essence, there’s no more need to work with two separate images in the HTML which makes things a little easier to manage both in the markup and in the styles.<\/p>\n\n\n\n