ヘッダーなどに半透明の背景と backdrop-filter を組み合わせ、背後だけをぼかしたガラスのような質感を作る

.site-header {
  position: sticky;
  top: 0;
  background: rgb(255 255 255 / .7);           /* 半透明 */
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid rgb(0 0 0 / .06);
}

/* 未対応環境では不透明に近づけて読みやすさを守る */
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgb(255 255 255 / .95); }
}