Design inspiration curated from X

Design Engineering Tip: Don’t apply backdrop-filter directly to you... - Gabriel

Published by Gabriel on July 18, 2026.

Design Engineering Tip: Don’t apply backdrop-filter directly to your modal. Move the blur to a separate pseudo-layer instead. Separating the blur from the content can reduce paint and compositing work, especially when a...

Design notes

Design Engineering Tip: Don’t apply backdrop-filter directly to your modal. Move the blur to a separate pseudo-layer instead. Separating the blur from the content can reduce paint and compositing work, especially when animating the modal. Code snippet below.

This entry is part of MotionVault's curated archive of interface, product, brand, website, and motion design references from public creators on X.

Image rights and licensing remain with Gabriel; use the original X post for source and licensing inquiries.

Deep Clone · React 19 + Framer Motion

Interactive Sandbox & Production Code

Reverse-engineered 1:1 component with spring physics, accessible keyboard controls, and modular Tailwind CSS.

https://northlight.design/sandbox/2078471817715429591
Launch Sandbox ↗

Reference details

Creator
Gabriel
X handle
@gabriell_lab
Published
July 18, 2026
Media
1 visual reference
Views
16,803
Likes
568
Bookmarks
609

Related tags