Bottom blur

by vovkasolovev

HTML

<style>
  :root {
    --blur-strength: 1.2;
    --blur-1: calc(0.5px * var(--blur-strength));
    --blur-2: calc(0.15625px * var(--blur-strength));
    --blur-3: calc(0.3125px * var(--blur-strength));
    --blur-4: calc(0.625px * var(--blur-strength));
    --blur-5: calc(1.25px * var(--blur-strength));
    --blur-6: calc(2.5px * var(--blur-strength));
    --blur-7: calc(5px * var(--blur-strength));
    --blur-8: calc(10px * var(--blur-strength));
  }

  .blur-container {
    z-index: 999999;
    width: 100%;
    height: 80px;
    position: fixed;
    bottom: 0;
    right: 0;
	pointer-events: none;
  }
.blur-container * {pointer-events: none;}

  .blur-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .blur-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .blur-layer:nth-child(1) {
    z-index: 1;
    backdrop-filter: blur(var(--blur-1));
    -webkit-backdrop-filter: blur(var(--blur-1));
    mask-image: linear-gradient(to bottom, transparent 0%, black 12.5%, black 25%, transparent 37.5%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12.5%, black 25%, transparent 37.5%);
  }

  .blur-layer:nth-child(2) {
    z-index: 2;
    backdrop-filter: blur(var(--blur-2));
    -webkit-backdrop-filter: blur(var(--blur-2));
    mask-image: linear-gradient(to bottom, transparent 12.5%, black 25%, black 37.5%, transparent 50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 12.5%, black 25%, black 37.5%, transparent 50%);
  }

  .blur-layer:nth-child(3) {
    z-index: 3;
    backdrop-filter: blur(var(--blur-3));
    -webkit-backdrop-filter: blur(var(--blur-3));
    mask-image: linear-gradient(to bottom, transparent 25%, black 37.5%, black 50%, transparent 62.5%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 37.5%, black 50%, transparent 62.5%);
  }

  .blur-layer:nth-child(4) {
    z-index:...