CSS Masks & Glassmorphism Generator

Generate the perfect masks for your design
Other tools Masks docs Free MDB UI KIT

Glassmorphism

Road in the Mountains

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

MDB 5 - Bootstrap 5 & Material Design UI Kit
Download MDB UI KIT