Blocks · Backgrounds

Progressive Blur

The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.

LSD FX: lsd-fx--blur-in ↩ Backgrounds

01 · live

Pattern

Progressive Blur

The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.

View generated HTML

<h2 class="im-heading">Progressive Blur</h2>
<p class="im-text">The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.</p>
<div class="lsd-frame lsd-fx--blur-in" style="min-height: 280px; display: grid; place-items: center;">
  <div class="lsd-img-placeholder lsd-img-placeholder--cool" style="width: 100%; height: 100%; min-height: 280px;"></div>
</div>

LSD blocks · Backgrounds · Progressive Blur

↩ Backgrounds