CSS Masks & Glassmorphism Generator

Generate the perfect masks for your design

Other tools Free MDB UI KIT

Glassmorphism

Sample

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://mdbootstrap.com/img/new/standard/city/053.jpg"
                class="w-100"
                alt="Sample"
                />
                <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