ホーム Tech Blog 要素の背後にぼかしなどの効果を加えるbackdrop-filter

要素の背後にぼかしなどの効果を加えるbackdrop-filter

Updated: 2022.12.21
Published: 2021.07.27
1,350views

スタイルシートでもWindowsなどOSのウィンドウを開いたときに背後にぼかしがかかる効果を実装することができます。

実装結果

HTML

<div class="wp-html">
    <div class="bg-filter-wrap">
      <div class="bg-filter">
        backdrop-filter
      </div>
    </div>
</div>

Style Sheet

.bg-filter-wrap {
  width: 100%;
  height: 400px;
  background: url("https://ilr.jp/wp/wp-content/uploads/2021/07/2021-04-10_12-21-57_092-scaled.jpg")
    no-repeat center center;
  background-size: cover;
}
.bg-filter {
  position: relative;
  width: 70%;
  height: 70%;
  background-color: #ffffff66;
  backdrop-filter: blur(10px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

backdrop-filter: blur(10px); で要素の背景をぼかす設定をしています。