その他31

$BLOCK_NAME: '.other-31';

// 変数

#{ $BLOCK_NAME } {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 300px;
  background: url('https://picsum.photos/id/134/800/450');
  background-attachment: cover;
  border-radius: 24px;

  &__blur {
    --radius: 24px;
    --inset: 12px;
    --transition-length: 16px;
    --blur: 15px;

    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    --r: max(var(--transition-length), calc(var(--radius) - var(--inset)));
    --corner-size: calc(var(--r) + var(--inset)) calc(var(--r) + var(--inset));
    --corner-gradient: transparent 0px,
      transparent calc(var(--r) - var(--transition-length)), black var(--r);
    --fill-gradient: black, black var(--inset),
      transparent calc(var(--inset) + var(--transition-length)),
      transparent calc(100% - var(--transition-length) - var(--inset)),
      black calc(100% - var(--inset));
    --fill-narrow-size: calc(100% - (var(--inset) + var(--r)) * 2);
    --fill-farther-position: calc(var(--inset) + var(--r));
    -webkit-mask-image: linear-gradient(to right, var(--fill-gradient)),
      linear-gradient(to bottom, var(--fill-gradient)),
      radial-gradient(at bottom right, var(--corner-gradient)),
      radial-gradient(at bottom left, var(--corner-gradient)),
      radial-gradient(at top left, var(--corner-gradient)),
      radial-gradient(at top right, var(--corner-gradient));
    -webkit-mask-size: 100% var(--fill-narrow-size),
      var(--fill-narrow-size) 100%, var(--corner-size), var(--corner-size),
      var(--corner-size), var(--corner-size);
    -webkit-mask-position: 0 var(--fill-farther-position),
      var(--fill-farther-position) 0, 0 0, 100% 0, 100% 100%, 0 100%;
    -webkit-mask-repeat: no-repeat;
  }
}