Kevin Powell - CommunityKP-C
Kevin Powell - Community•8mo ago•
11 replies
Zax71

CSS transition on <dialog> backdrop-filter

Hi! I have managed to add a backdrop-filter of blur to a <dialog> element, but I cannot seem to figure out how to fade it in. One StackOverflow thread mentioned using opacity() but the below CSS just snaps in the blur (And it seems that Safari doesn't support the :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);
}


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
...
Dialog background blur transition
Was this page helpful?