Skip to content

Instantly share code, notes, and snippets.

@mattsafaii
mattsafaii / BlurEffect.html
Last active April 18, 2025 10:56
Gradient bottom blur effect with Tailwind
<div class="fixed bottom-0 left-0 right-0 h-32 sm:h-40 pointer-events-none">
<div class="absolute inset-0 bg-neutral-50/12.5 dark:bg-neutral-900/12.5 backdrop-blur-[0.5px] [mask-image:linear-gradient(transparent_0%,black_12.5%,black_25%,transparent_37.5%)]"></div>
<div class="absolute inset-0 bg-neutral-50/25 dark:bg-neutral-900/25 backdrop-blur-[1px] [mask-image:linear-gradient(transparent_12.5%,black_25%,black_37.5%,transparent_50%)]"></div>
<div class="absolute inset-0 bg-neutral-50/37.5 dark:bg-neutral-900/37.5 backdrop-blur-[2px] [mask-image:linear-gradient(transparent_25%,black_37.5%,black_50%,transparent_62.5%)]"></div>
<div class="absolute inset-0 bg-neutral-50/50 dark:bg-neutral-900/50 backdrop-blur-[4px] [mask-image:linear-gradient(transparent_37.5%,black_50%,black_62.5%,transparent_75%)]"></div>
<div class="absolute inset-0 bg-neutral-50/62.5 dark:bg-neutral-900/62.5 backdrop-blur-[8px] [mask-image:linear-gradient(transparent_50%,black_62.5%,black_75%,transparent_87.5%)]"></div>
<div class="a