11 replies

CSS transition on <dialog> backdrop-filter

Hi! I have managed to add a

backdrop-filter

backdrop-filter

of blur to a

<dialog>

<dialog>

element, but I cannot seem to figure out how to fade it in. One StackOverflow thread mentioned using

opacity()

opacity()

but the below CSS just snaps in the blur (And it seems that Safari doesn't support the

:open

:open

tag so that isn't great). Any help would be appreciated :)

dialog::backdrop {
    transition: backdrop-filter 2s;
    backdrop-filter: blur(4px) opacity(0);
}
dialog:open::backdrop {
    backdrop-filter: blur(4px) opacity(1);
}

dialog::backdrop {
    transition: backdrop-filter 2s;
    backdrop-filter: blur(4px) opacity(0);
}
dialog:open::backdrop {
    backdrop-filter: blur(4px) opacity(1);
}

Here's a minimum reproduction Codepen that I've set up, most of this is just copy paste from the mdn docs, my real code is quite different but the CSS is identical.
https://codepen.io/Zax71/pen/MYwvLwd

CodePenZax71

Dialog background blur transition

...

KP-C

Kevin Powell - Community•10mo ago•

11 replies

Zax71

CSS transition on <dialog> backdrop-filter

Hi! I have managed to add a

backdrop-filter

backdrop-filter

of blur to a

<dialog>

<dialog>

element, but I cannot seem to figure out how to fade it in. One StackOverflow thread mentioned using

opacity()

opacity()

but the below CSS just snaps in the blur (And it seems that Safari doesn't support the

:open

:open

tag so that isn't great). Any help would be appreciated :)

dialog::backdrop {
    transition: backdrop-filter 2s;
    backdrop-filter: blur(4px) opacity(0);
}
dialog:open::backdrop {
    backdrop-filter: blur(4px) opacity(1);
}

dialog::backdrop {
    transition: backdrop-filter 2s;
    backdrop-filter: blur(4px) opacity(0);
}
dialog:open::backdrop {
    backdrop-filter: blur(4px) opacity(1);
}

CodePenZax71

Dialog background blur transition

...

CSS transition on <dialog> backdrop-filter

Similar Threads

CSS transition on <dialog> backdrop-filter

Similar Threads

Similar Threads

Similar Threads