Blur Background Variant for Modal

[himanshumehru]

When you open the search modal on tailwindcss.com, you can see that the background has been blurred. This is available for modals on mary-ui for example. Can anyone tell me how I can achieve this effect? or if it can just be added to the modals? Currently, the modal overlaying can get lost if the background is already very cluttered.

Thanks.

[jeffchown]

@himanshumehru Try e.g.:

<flux:modal name="my-dialog" class="backdrop:backdrop-blur-xs">

From: https://tailwindcss.com/docs/backdrop-filter-blur

And to make the change for all modals/dialogs in your app:

ui-modal dialog {
    @apply backdrop:backdrop-blur-xs;
}

[himanshumehru]

Thank you. I love you. :) Himanshu

[jeffchown]

You're welcome, @himanshumehru !