How do I make glass/blur background like in windows 11 menus and apps in a html element with css?

Is there any way to make glassy/blur background element or a card in html with css which is like the start menu bg in windows 11?

edit: I mean I am able to do it till the backdrop filter part but don't know how to get that noise effect, I tried putting a noise png as a background but it doesn't looks like the one I am trying to achieve

the noise seems too much.

Here's a simple example, play with it for better or more suitable results. Thanks for Unsplash for the testing image. Next time, try to make your question more clear and show your work!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
    /* Image for testing purposes, thanks for Unsplash */
    background-image: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100");
    background-position: center;
}
.glass {
    /* CSS for Glass UI, play with it for better or more suitable results */
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.57);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
    /* <div> size */
    width: 400px;
    height: 300px;
    /* Make nice text */
    text-align: center;
    vertical-align: middle;
    line-height: 300px;
    font-family: cursive;
    font-size: 40px;
}

<!-- language: lang-html -->

<div class="glass">Hello!</div>

<!-- end snippet -->