Backdrop

Background layer behind an overlay.

html

<div class="bd-demo">
  <div class="bd-scenery" aria-hidden="true">
    <div class="bd-scenery__card">Photo</div>
    <div class="bd-scenery__card">Photo</div>
    <div class="bd-scenery__card">Photo</div>
  </div>
  <div class="bd-layer bd-layer--blurred" style="--bd-color:#241430;--bd-blur:4px;opacity:45%;"></div>
  <div class="bd-panel">
    <h3 class="bd-panel__title">Preview panel</h3>
    <p class="bd-panel__text">This card sits above the backdrop layer, which dims — and can blur — the content behind it.</p>
  </div>
</div>
<style>
.bd-demo { position: relative; min-height: 380px; border-radius: 12px; overflow: hidden; background: #FAF7F2; display: grid; place-items: center; }
.bd-scenery { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 20px; box-sizing: border-box; }
.bd-scenery__card { background: linear-gradient(135deg, #BFD9F2, #D9C8F0); border-radius: 10px; display: grid; place-items: center; font: 600 13px system-ui, sans-serif; color: #241430; }
.bd-layer { position: absolute; inset: 0; }
.bd-layer--solid { background: var(--bd-color); }
.bd-layer--blurred { background: var(--bd-color); backdrop-filter: blur(var(--bd-blur)); -webkit-backdrop-filter: blur(var(--bd-blur)); }
.bd-layer--gradient { background: linear-gradient(to top, var(--bd-color), transparent); }
.bd-panel { position: relative; z-index: 1; background: #FAF7F2; color: #241430; border-radius: 14px; box-shadow: 0 20px 44px rgba(36,20,48,.28); padding: 22px; max-width: 280px; text-align: center; font: 16px/1.5 system-ui, sans-serif; }
.bd-panel__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.bd-panel__text { margin: 0; font-size: 13px; color: #241430cc; }
</style>

tailwind

<div class="relative min-h-[380px] rounded-xl overflow-hidden bg-[#FAF7F2] grid place-items-center">
  <div aria-hidden="true" class="absolute inset-0 grid grid-cols-3 gap-2.5 p-5 box-border">
    <div class="rounded-[10px] grid place-items-center text-[13px] font-semibold text-[#241430]" style="background:linear-gradient(135deg,#BFD9F2,#D9C8F0);">Photo</div>
    <div class="rounded-[10px] grid place-items-center text-[13px] font-semibold text-[#241430]" style="background:linear-gradient(135deg,#BFD9F2,#D9C8F0);">Photo</div>
    <div class="rounded-[10px] grid place-items-center text-[13px] font-semibold text-[#241430]" style="background:linear-gradient(135deg,#BFD9F2,#D9C8F0);">Photo</div>
  </div>
  <div class="bd-tw-layer bd-tw-layer--blurred absolute inset-0" style="--bd-color:#241430;--bd-blur:4px;opacity:45%;"></div>
  <div class="relative z-10 bg-[#FAF7F2] text-[#241430] rounded-2xl shadow-2xl p-6 max-w-[280px] text-center font-sans">
    <h3 class="mb-2 text-base font-semibold">Preview panel</h3>
    <p class="text-[13px] text-[#241430]/80">This card sits above the backdrop layer, which dims — and can blur — the content behind it.</p>
  </div>
</div>
<style>
.bd-tw-layer--solid { background: var(--bd-color); }
.bd-tw-layer--blurred { background: var(--bd-color); backdrop-filter: blur(var(--bd-blur)); -webkit-backdrop-filter: blur(var(--bd-blur)); }
.bd-tw-layer--gradient { background: linear-gradient(to top, var(--bd-color), transparent); }
</style>

react

export function Backdrop({
  color = "#241430",
  opacity = 45,
  blur = 4,
  style = "blurred",
  visible = true,
}) {
  const layerBackground = {
    solid: color,
    blurred: color,
    gradient: "linear-gradient(to top, " + color + ", transparent)",
  }[style] ?? color;
  return (
    <div style={{ position: "relative", minHeight: 380, borderRadius: 12, overflow: "hidden",
      background: "#FAF7F2", display: "grid", placeItems: "center" }}>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)", gap: 10, padding: 20, boxSizing: "border-box" }}>
        <div style={{ background: "linear-gradient(135deg, #BFD9F2, #D9C8F0)", borderRadius: 10 }} />
        <div style={{ background: "linear-gradient(135deg, #BFD9F2, #D9C8F0)", borderRadius: 10 }} />
        <div style={{ background: "linear-gradient(135deg, #BFD9F2, #D9C8F0)", borderRadius: 10 }} />
      </div>
      {visible && (
        <div style={{ position: "absolute", inset: 0, background: layerBackground, opacity: opacity / 100,
          backdropFilter: style === "blurred" ? "blur(" + blur + "px)" : "none",
          WebkitBackdropFilter: style === "blurred" ? "blur(" + blur + "px)" : "none" }} />
      )}
      <div style={{ position: "relative", zIndex: 1, background: "#FAF7F2", color: "#241430", borderRadius: 14,
        boxShadow: "0 20px 44px rgba(36,20,48,.28)", padding: 22, maxWidth: 280, textAlign: "center",
        fontFamily: "system-ui, sans-serif" }}>
        <h3 style={{ margin: "0 0 8px", fontSize: 16, fontWeight: 600 }}>Preview panel</h3>
        <p style={{ margin: 0, fontSize: 13, color: "#241430cc" }}>This card sits above the backdrop layer, which dims — and can blur — the content behind it.</p>
      </div>
    </div>
  );
}