KPC
Kevin Powell - Community•3mo ago
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);
}
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
Zax71
CodePen
Dialog background blur transition
...
8 Replies
Chris Bolson
Chris Bolson•3mo ago
You could try using @starting-style{} It won’t work on all browsers so it would be progressive enhancement.
Zax71
Zax71OP•3mo ago
Ooh, seems like it is avaliable on all now
No description
Zax71
Zax71OP•3mo ago
    dialog[open]::backdrop {
        backdrop-filter: blur(16px) opacity(1);
    }

    @starting-style {
        dialog[open]::backdrop {
            backdrop-filter: blur(16px) opacity(0);
        }
    }

    dialog::backdrop {
        transition: backdrop-filter 1s;
    }
    dialog[open]::backdrop {
        backdrop-filter: blur(16px) opacity(1);
    }

    @starting-style {
        dialog[open]::backdrop {
            backdrop-filter: blur(16px) opacity(0);
        }
    }

    dialog::backdrop {
        transition: backdrop-filter 1s;
    }
This doesn't work for me, maybe I'm missing something with the syntax I've changed the CSS to work in a similar style to Kevin's video on it (https://www.youtube.com/watch?v=vmDEHAzj2XE) and that doesn't fix this either 
    dialog[open]::backdrop {
        opacity: 1;
    }

    dialog::backdrop {
        transition-property: opacity display overlay;
        transition-duration: 1s;
        transition-behavior: allow-discrete;
        backdrop-filter: blur(16px);
        opacity: 0;
    }

    @starting-style {
        dialog[open]::backdrop {
            opacity: 0;
        }
    }
    dialog[open]::backdrop {
        opacity: 1;
    }

    dialog::backdrop {
        transition-property: opacity display overlay;
        transition-duration: 1s;
        transition-behavior: allow-discrete;
        backdrop-filter: blur(16px);
        opacity: 0;
    }

    @starting-style {
        dialog[open]::backdrop {
            opacity: 0;
        }
    }
Kevin Powell
Kevin Powell•3mo ago
The problem here is you are only changing the ::backdrop, which is a child of the dialog. When you close the dialog, it instantly goes away. You only need to do the display and overlay transitions on the dialog itself, not the backdrop: 
dialog {
  opacity: 0;
  transition-property: opacity display overlay;
  transition-duration: 1s;
  transition-behavior: allow-discrete;
}

dialog[open] {
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

dialog::backdrop {
  transition: opacity;
  transition-duration: 1s;
  backdrop-filter: blur(16px);
  background: hsl(0 0% 0% / 1);
  opacity: 0;
}

dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog[open]::backdrop {
    opacity: 0;
  }
}
dialog {
  opacity: 0;
  transition-property: opacity display overlay;
  transition-duration: 1s;
  transition-behavior: allow-discrete;
}

dialog[open] {
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

dialog::backdrop {
  transition: opacity;
  transition-duration: 1s;
  backdrop-filter: blur(16px);
  background: hsl(0 0% 0% / 1);
  opacity: 0;
}

dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog[open]::backdrop {
    opacity: 0;
  }
}
I added a dark bg to the backdrop to make it more obvious here, you can remove/change that obviously 🙂
Zax71
Zax71OP•3mo ago
Ah, thank you for the help :) That fades in the content of the <dialog> but not the background blur. Would you know why that is? Ah, it's a browser thing. I think you did mention this in the video but I assumed it would have changed after a year It works correctly in Chromium but my primary browser is Firefox (and upon installing Chrome it forces itself as the default browser so I don't have it installed most of the time)
Kevin Powell
Kevin Powell•3mo ago
Firefox supports allow-discrete, but not for the display property yet :\ - https://caniuse.com/mdn-css_properties_display_is_transitionable
Zax71
Zax71OP•3mo ago
Yep, iirc that’s exactly what you mentioned in the video
Zax71
Zax71OP•3mo ago
https://bugzilla.mozilla.org/show_bug.cgi?id=1834877 there’s the bug report
1834877 - [css-display] allow 'display' to be animated; and when an...
NEW (nobody) in Core - CSS Transitions and Animations. Last updated 2025-06-03.

Did you find this page helpful?