<div class="blur-container"> <div class="blur-layer layer1"></div> <div class="blur-layer layer2"></div> <div class="blur-layer layer3"></div> <div class="blur-layer layer4"></div> </div>
.blur-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 80px;
pointer-events: none;
z-index: 4;
overflow: hidden;
}
.blur-layer {
position: absolute;
inset: 0;
pointer-events: none;
}
.blur-layer.layer1 {
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
.blur-layer.layer2 {
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
}
.blur-layer.layer3 {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
mask-image: linear-gradient(to bottom, transparent 20%, black 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 100%);
}
.blur-layer.layer4 {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
}