遮罩層使用 background:linear-gradient 透明漸變到白色的背景，與 backdrop-filter: blur 合併使用

❌範例1:遮罩層把圖片遮一半

❌範例2:遮罩層把圖片全部遮住

把透明 png 設成 mask-image，與 backdrop-filter: blur 合併使用

範例3

❌範例4:把 backdrop-filter: blur 設在 mask-image 遮罩層的子元素

使用 mask-image:linear-gradient 和 backdrop-filter: blur

範例5:圖片用 img tag

範例6:圖片用 background-image

backdrop-filter:blur(px)

疊圖層大法

使用 Poster Ramen 的Progressive Blur 產生器，Generate Progressive Blur effect for your images.

❌範例7:用一堆圖層去疊

範例8:用一堆圖層去疊+強制放大 避免圖片邊角露餡

其他應用

自動抓圖片顏色當漸層遮罩

範例9

範例10