Progressive Blur Nieuw

<!-- Progressive Blur · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="pbl"><div class="pbl__list"><span class="pbl__kick">Aanvragen deze week</span>
<div class="pbl__row"><b>Dakkapel</b><span>Zoetermeer</span><em>€ 8.400</em></div><div class="pbl__row"><b>Badkamer</b><span>Delft</span><em>€ 14.250</em></div><div class="pbl__row"><b>Uitbouw 3 m</b><span>Pijnacker</span><em>€ 38.900</em></div><div class="pbl__row"><b>Kozijnen</b><span>Rijswijk</span><em>€ 9.700</em></div><div class="pbl__row"><b>Zolder</b><span>Leiden</span><em>€ 6.150</em></div><div class="pbl__row"><b>Keuken</b><span>Den Haag</span><em>€ 17.300</em></div><div class="pbl__row"><b>Vloerverwarming</b><span>Wassenaar</span><em>€ 5.800</em></div><div class="pbl__row"><b>Schuur</b><span>Voorburg</span><em>€ 4.200</em></div><div class="pbl__row"><b>Gevelisolatie</b><span>Gouda</span><em>€ 21.600</em></div>
</div><div class="pbl__blur" aria-hidden="true"><i style="--b:.5px;--s:0%"></i><i style="--b:1px;--s:12.5%"></i><i style="--b:2px;--s:25%"></i><i style="--b:4px;--s:37.5%"></i><i style="--b:8px;--s:50%"></i><i style="--b:16px;--s:62.5%"></i></div><button class="pbl__cta">Alle 46 aanvragen</button></div>
</div>

/* Progressive Blur · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.pbl{position:absolute;inset:0;background:#fff;font-family:'Switzer',system-ui,sans-serif;overflow:hidden}
.pbl__list{position:absolute;inset:0;overflow-y:auto;padding:12px 16px 80px;scrollbar-width:none}
.pbl__list::-webkit-scrollbar{display:none}
.pbl__kick{display:block;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#F5480F;margin-bottom:6px}
.pbl__row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(10,10,10,.08);font-size:13px;color:#0a0a0a}
.pbl__row span{font-size:12px;color:rgba(10,10,10,.55)}
.pbl__row em{font:500 12px 'JetBrains Mono',monospace;font-style:normal;min-width:70px;text-align:right}
.pbl__blur{position:absolute;left:0;right:0;bottom:0;height:48%;pointer-events:none}
.pbl__blur i{position:absolute;inset:0;backdrop-filter:blur(var(--b));-webkit-backdrop-filter:blur(var(--b));-webkit-mask-image:linear-gradient(to bottom,transparent var(--s),#000 calc(var(--s) + 12.5%),#000 calc(var(--s) + 25%),transparent calc(var(--s) + 37.5%));mask-image:linear-gradient(to bottom,transparent var(--s),#000 calc(var(--s) + 12.5%),#000 calc(var(--s) + 25%),transparent calc(var(--s) + 37.5%))}
.pbl__blur i:last-child{-webkit-mask-image:linear-gradient(to bottom,transparent var(--s),#000 calc(var(--s) + 12.5%));mask-image:linear-gradient(to bottom,transparent var(--s),#000 calc(var(--s) + 12.5%))}
.pbl__blur::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0) 40%,rgba(255,255,255,.7))}
.pbl__cta{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);border:0;background:#0a0a0a;color:#fff;border-radius:999px;padding:8px 16px;font:600 12px 'Switzer',system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.pbl__cta:hover{background:#F5480F}