backdrop-filterを完全マスター！8つのフィルターと実務に役立つ応用テクニック2選

<div class="wrapper">
  <div class="blur-box">
    <p class="text">このボックスの背後にある要素は<br>ぼかされて表示されます</p>
  </div>
</div>

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 740 / 320;
  border-radius: 5px;
  background: url(background.webp) no-repeat center/cover;
}

.blur-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  padding: 50px 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}

@media (max-width: 767px) {
  .blur-box {
    width: 80%;
    padding: 25px 0;
  }
}

.text {
  color: #31345e;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 767px) {
  .text {
    font-size: 15px;
    line-height: 1.5;
  }
}

<div class="wrapper">
  <p class="blur-text">filter は、このテキスト自体に<br>効果を適用します</p>
</div>

@keyframes fadeBlur {
  0% {
    filter: blur(20px);
    opacity: 0;
  }

  20% {
    filter: blur(0);
    opacity: 1;
  }

  60% {
    filter: blur(0);
    opacity: 1;
  }

  80% {
    filter: blur(20px);
    opacity: 0;
  }

  100% {
    filter: blur(20px);
    opacity: 0;
  }
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 740 / 320;
  border-radius: 5px;
  background: url(background.webp) no-repeat center/cover;
}

.blur-text {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  filter: blur(5px);
  opacity: 0;
  animation: fadeBlur 5s linear infinite;
}

@media (max-width: 767px) {
  .blur-text {
    font-size: 16px;
    line-height: 1.65;
  }
}

<div class="wrapper">
  <section class="section">
    <div class="section-image"><span><img src="image01.webp" alt="サンプル画像1"></span></div>
    <div class="section-content">
      <p class="section-title">サンプルタイトル1</p>
      <p class="section-text">モーダルに backdrop-filter を適用すると、背後の要素がぼかされ、奥行きのある表現が可能になります。この効果により、モーダルの内容を際立たせつつ、背景との一体感を保つことができます。</p>
    </div>
  </section>
  <div class="modal-trigger"><button type="button">モーダルを開く</button></div>
  <section class="section">
    <div class="section-image"><span><img src="image02.webp" alt="サンプル画像2"></span></div>
    <div class="section-content">
      <p class="section-title">サンプルタイトル2</p>
      <p class="section-text">モーダルに backdrop-filter を適用すると、背後の要素がぼかされ、奥行きのある表現が可能になります。この効果により、モーダルの内容を際立たせつつ、背景との一体感を保つことができます。</p>
    </div>
  </section>
  <div class="modal">
    <div class="modal-inner">
      <div class="modal-overlay"></div>
      <div class="modal-content">
        <p class="modal-title">モーダルのタイトル</p>
        <p class="modal-text">これは backdrop-filter を適用したモーダルのデモです。<br class="br is-pc">モーダルを開くと、背後のコンテンツがぼかされ、より立体的な表現になります。<br class="br is-pc">この効果により、モーダルの内容が強調されるだけでなく、<br class="br is-pc">背景との一体感を保ちながら、視認性を向上させることができます。</p>
        <div class="close-modal"><button type="button">モーダルを閉じる</button></div>
      </div>
    </div>
  </div>
</div>

/* 改行 */
@media (min-width: 768px) {
  .br.is-sp {
    display: none;
  }
}

@media (max-width: 767px) {
  .br.is-pc {
    display: none;
  }
}

/* セクション */
.section {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .section {
    display: block;
  }
}

.section-image {
  width: 50%;
}

@media (max-width: 767px) {
  .section-image {
    width: auto;
  }
}

.section-image span {
  display: block;
  position: relative;
  aspect-ratio: 1.4;
  overflow: hidden;
}

.section-image img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.section-content {
  width: 50%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .section-content {
    width: auto;
    margin-top: 25px;
  }
}

.section-title {
  margin-bottom: 30px;
  color: #192753;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .section-title {
    margin-bottom: 15px;
    font-size: 22px;
  }
}

@media (min-width: 768px) {
  .section:nth-of-type(2n+1) {
    flex-direction: row;
  }

  .section:nth-of-type(2n+1) .section-content {
    padding-left: 60px;
  }

  .section:nth-of-type(2n+2) {
    flex-direction: row-reverse;
  }

  .section:nth-of-type(2n+2) .section-content {
    padding-right: 60px;
  }
}

/* モーダルのトリガー */
.modal-trigger {
  margin: 40px 0;
}

@media (max-width: 767px) {
  .modal-trigger {
    margin: 25px 0 30px;
  }
}

.modal-trigger button {
  display: block;
  margin: 0 auto;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  background: #4466ce;
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.3s;
}

@media (max-width: 767px) {
  .modal-trigger button {
    padding: 15px 25px;
  }
}

@media (min-width: 768px) {
  .modal-trigger button:hover {
    background: #192753;
  }
}

/* モーダル */
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s 0.5s;
}

.modal-inner {
  position: relative;
  width: calc(100% - 60px);
  margin: 0 auto;
}

@media (max-width: 767px) {
  .modal-inner {
    width: calc(100% - 30px);
  }
}

.modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: rgba(25, 39, 83, 0.85);
  backdrop-filter: blur(7px);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s, transform 0.5s;
}

.modal-content {
  position: relative;
  padding: 80px 0;
  color: #fff;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.5s;
}

@media (max-width: 767px) {
  .modal-content {
    padding: 50px 0;
  }
}

.modal-title {
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 767px) {
  .modal-title {
    margin-bottom: 20px;
    font-size: 22px;
  }
}

.modal-text {
  text-align: center;
}

@media (max-width: 767px) {
  .modal-text {
    margin: 0 15px;
    text-align: left;
  }
}

.close-modal {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .close-modal {
    margin-top: 30px;
  }
}

.close-modal button {
  display: block;
  margin: 0 auto;
  padding: 15px 30px;
  border: none;
  border: 1px solid #fff;
  border-radius: 5px;
  background: #fff;
  color: #192753;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.3s, color 0.3s;
}

@media (max-width: 767px) {
  .close-modal button {
    padding: 15px 25px;
  }
}

.modal.is-active {
  visibility: visible;
  transition: visibility 0s;
}

.modal.is-active .modal-overlay {
  opacity: 1;
  transform: scale(1);
}

.modal.is-active .modal-content {
  opacity: 1;
}

@media (min-width: 768px) {
  .close-modal button:hover {
    background: transparent;
    color: #fff;
  }
}

(($) => {

  const modal = (() => {
    function init() {
      $('.modal-trigger button').on('click', () => {
        $('.modal').addClass('is-active');
        return false;
      });

      $('.close-modal button').on('click', () => {
        $('.modal').removeClass('is-active');
        return false;
      });
    }
    
    return {
      init: init
    };
  })();
  
  if ($('.modal')[0]) modal.init();

})(jQuery);

<header class="header">
  <div class="header-logo"><a href="#">SAMPLE</a></div>
  <nav class="header-nav">
    <ul>
      <li><a href="#">会社情報</a></li>
      <li><a href="#">事業内容</a></li>
      <li><a href="#">採用情報</a></li>
      <li><a href="#">ニュース</a></li>
    </ul>
  </nav>
  <div class="header-contact"><a href="#">お問い合わせ</a></div>
</header>

/* ヘッダー全体 */
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  min-width: 1200px;
  height: 120px;
  background: rgba(255, 255, 255, 0.85); /* 半透明の背景 */
  backdrop-filter: blur(7px); /* 背景をぼかす */
}

@media (max-width: 767px) {
  .header {
    min-width: auto;
    height: 80px;
  }
}

/* ロゴ */
.header-logo {
  position: absolute;
  left: 50px;
  top: 50%;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 2px;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .header-logo {
    left: 20px;
    font-size: 25px;
    letter-spacing: 1px;
  }
}

.header-logo a {
  display: inline-block;
  color: #192753;
  text-decoration: none;
  vertical-align: top;
}

/* ナビゲーションメニュー */
.header-nav {
  position: absolute;
  right: 228px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .header-nav {
    display: none;
  }
}

.header-nav ul {
  list-style: none;
  display: flex;
  gap: 0 30px;
}

.header-nav ul li a {
  display: block;
  padding: 10px;
  color: inherit;
  font-weight: 700;
  line-height: 1.4;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s;
}

.header-nav ul li a:hover {
  color: #4466ce;
}

/* お問い合わせボタン */
.header-contact {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .header-contact {
    display: none;
  }
}

.header-contact a {
  padding: 8px 15px;
  border-radius: 5px;
  background: #4466ce;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header-contact a:hover {
  background: #192753;
}