Progressive Blur

@property --progressive-blur-rotation {
  inherits: true;
  initial-value: 0deg;
  syntax: '<angle> | <side-or-corner>';
}

@property --progressive-blur-inset-block {
  inherits: true;
  initial-value: 0;
  syntax: '<length>';
}

@property --progressive-blur-inset-inline {
  inherits: true;
  initial-value: 0;
  syntax: '<length>';
}

.progressive-blur {
  block-size: var(--progressive-blur-block-size, 100%);
  inline-size: var(--progressive-blur-inline-size, 100%);
  inset: var(--progressive-blur-inset, 0);
  pointer-events: none;
  position: var(--progressive-blur-position, absolute);
  z-index: var(--progressive-blur-z-index, auto);
}

.progressive-blur--block-start {
  --progressive-blur-inset-inline: -6.4rem;
}

.progressive-blur--block-end {
  --progressive-blur-rotation: 180deg;
  --progressive-blur-inset-inline: -6.4rem;
}

.progressive-blur--inline-start {
  --progressive-blur-rotation: -90deg;
  --progressive-blur-inset-block: -6.4rem;
}

.progressive-blur--inline-end {
  --progressive-blur-rotation: 90deg;
  --progressive-blur-inset-block: -6.4rem;
}

.progressive-blur__step {
  inset-block: var(--progressive-blur-inset-block);
  inset-inline: var(--progressive-blur-inset-inline);
  position: absolute;
}

.progressive-blur__step:nth-child(1) {
  backdrop-filter: blur(0.5px);
  mask: linear-gradient(var(--progressive-blur-rotation), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%);
}

.progressive-blur__step:nth-child(2) {
  backdrop-filter: blur(1px);
  mask: linear-gradient(var(--progressive-blur-rotation), rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%);
}

.progressive-blur__step:nth-child(3) {
  backdrop-filter: blur(2px);
  mask: linear-gradient(var(--progressive-blur-rotation), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%);
}

.progressive-blur__step:nth-child(4) {
  backdrop-filter: blur(4px);
  mask: linear-gradient(var(--progressive-blur-rotation), rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%);
}

.progressive-blur__step:nth-child(5) {
  backdrop-filter: blur(8px);
  mask: linear-gradient(var(--progressive-blur-rotation), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%);
}

.progressive-blur__step:nth-child(6) {
  backdrop-filter: blur(16px);
  mask: linear-gradient(var(--progressive-blur-rotation), rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%);
}

.progressive-blur__step:nth-child(7) {
  backdrop-filter: blur(32px);
  mask: linear-gradient(var(--progressive-blur-rotation), rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%);
}

.progressive-blur__step:nth-child(8) {
  backdrop-filter: blur(64px);
  mask: linear-gradient(var(--progressive-blur-rotation), rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%);
}