Glassmorphism
Can you see me?
.mask-custom {
backdrop-filter: blur( 5px );
background-color: rgba(178, 60, 253, 0.2);
}
<div class="bg-image">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp"
class="w-100"
alt="Louvre"
/>
<div class="mask mask-custom">
<div class="d-flex justify-content-center align-items-center h-100">
<h3 class="text-white mb-0">Can you see me?</h3>
</div>
</div>
</div>
How to use it?
1. Download MDB 5 - free UI KIT
2. Create the mask you like
3. Copy the generated code and paste it into the MDB project