CSSを使用したぼかしオーバーレイの作成方法

方法1: バックグラウンド画像にぼかしをかける この方法では、要素の背景画像に対してぼかし効果を適用します。

.overlay {
  background-image: url('背景画像のURL');
  background-size: cover;
  filter: blur(10px); /* ぼかしの程度を指定します */
}

方法2: 要素内のコンテンツにぼかしをかける この方法では、要素内のコンテンツ全体にぼかし効果を適用します。

.overlay {
  backdrop-filter: blur(10px); /* ぼかしの程度を指定します */
}

方法3: 独立した要素としてぼかしオーバーレイを作成する この方法では、要素の前面に独立したぼかしオーバーレイを作成します。

.overlay {
  position: relative;
}
.overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px); /* ぼかしの程度を指定します */
}

これらの方法を使って、ぼかし効果を持つオーバーレイを作成することができます。ぼかしの程度やオーバーレイの配置方法をカスタマイズして、自分のデザインに合わせて調整してください。