流行りですねー。
ここ最近、よく見るかなーと思います。
私もよく使います(●´ω｀●)

background-color: rgba(255, 255, 255, .5);
backdrop-filter: blur(10px);
border: 1px solid #fff;

とても簡単。
adobe XDにも「背景のぼかし」という項目がありますね。
これを実現するのが、backdrop-filter: blurになります。

スマホ版でメニューやモーダルを出す時にも
画面いっぱいにボカシを入れると良い感じになりますね。

たしか、ここ1か月くらいで発生した事象なのだけど
これまで正常に表示されていたスライド（slick.js使用）部分の
画像やテキストが酷くボヤるようになっていました。

何か仕様が変わったのか・・
よくは解りませんが💦
表示確認したところ、windowsでもmacでも同じで
さらにChromeでもsafariでも、edgeでも同様にぼやけていた。。。

一体何が起こったのです？！

とりあえずボヤけないよう対応しなくては・・
ということで

backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;

imgタグまたはテキスト等、ボヤけている箇所のタグに
上記のcssを追記。

これでとりあえずボヤけは解消しました。

なお、似たようなjsということで
swiper.js をよく使うのですが、こちらは特に問題なし。

slick.js を使用していた部分だけボヤけていた、という事象だったので
忘れないよう覚書。

“min-width: 768px”時には〇〇〇という感じ。

HTML

<div class="card card-body">
  <h3 class="card-title">タイトルタイトルタイトルタイトル</h3>
  <p class="lines">文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります。文章が入ります文章が入ります文章が入ります文章が入ります。</p>
</div>

Javascript/jQuery

// min-width: 768px クラスを付与・差し替える

$(window).on('load', function() {
  $('.card-body').find('.lines').each(function ( index, value ) {
    if (window.matchMedia('(min-width: 768px)').matches) {
      $(this).attr('class', 'card-text lines-1');
    } else {
      $(this).attr('class', 'card-text lines-2');
    }
  });
});

min-width: 768px は、タブレットやパソコンの時。
でなければ、スマホの時、と考えられますので
スマホとそれ以外の時で変化するものがある場合に使えます。

find ～ each は、上記の例でいうと
.card-bodyの下（子）にある.linesを探します。（ひとつだけではなくループ。繰り返し処理。）
もし”min-width: 768px” だったら、”card-text lines-1″クラスを付与。
でなければ、”card-text lines-2″クラスを付与、となります。