Cross Fade

Sep 06, 20251 min read

Description

Uses the cross-fade() CSS function to blend two or more images at defined transparency levels. This function allows you to create smooth transitions and overlay effects by specifying opacity percentages for each image in the blend.

Syntax

cross-fade(url(white.png) 0%, url(black.png) 100%); /* fully black */
cross-fade(url(white.png) 25%, url(black.png

404 | This page could not be found.

body {
    --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
    background-size: cover;
    background-image: cross-fade(
        var(--transparent),
        url("./images/bg.jpg"),
        50%
    );
    background-image: -webkit-cross-fade(
        var

Cross Fade • Shiyu's Hideout

Description

Syntax

Description

Syntax

Usage