Glassmorphism Generator

What is Glassmorphism?

Glassmorphism is a term used to describe UI design that emphasises light or dark objects, placed on top of colourful backgrounds. A background-blur is placed on the objects which allows the background to shine through – giving it the impression of frosted glass.

Glassmorphism

Can you see me?

• CSS
• Html

 
 .mask-custom {
    backdrop-filter: {{this.blurStyle.backdropFilter}};
    background-color: {{this.blurStyle.background}}
}
.bg-image {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

.mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
}
        

<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">
        <h3>Can you see me?</h3>
 </div>
</div>
            
        

Blur

Transparency

Color