CSS
div {
/* Controls blur and its intensity. */
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
/* Opacity needs to be lower than 1 to make the background transparent. */
background-color: rgba(0, 0, 0, 0.4);
/* Add accent to element by introducing a border. The color needs to be adjusted depending on the background color. */
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
}
Tailwind
<div class="blur-sm"></div>
Useful links
Backdrop filter - MDN Docs
Browser availability of backdrop-filter
Tailwind Blur
Glassmorphism CSS generator
