Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jhey ʕ•ᴥ•ʔ

145,895 subscribers

44,674 views • 1 year ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

Hugo Ventura1 year ago

Combine that with easing gradients for the mask ( and you get the cleanest progressive blur possible

{Bhide}.Svelte1 year ago

😍😍 Your work blows me away every single time...Amazing 👌🏻

anotherdeveloper.dev1 year ago

So this is how Phamous does all that cool stuff? I thought he was using svg filters or something. Amazing thanks for sharing Jhey :)

jhey ▲🐻🎈1 year ago

yep - it is jus little overlay stacks for a cross browser compatible solution 🤙 issue with using an SVG filter for overlay is that it isn't cross browser compatible because url doesn't play ball in WebKit 🥲 (works fine if you're applying it direct through filter though)

Cory Simmons1 year ago

Very cool technique 👍

Josh Miller1 year ago

Yes Captain! 🫡

chope1 year ago

Wizard 🧙‍♂️

Rafael Lopes1 year ago

Bruxo

Manfred Neustifter1 year ago

🙌

Voicu Apostol1 year ago

Are you using opacity? The main image still shows, so it might not be fully progressive. Not sure..

Related Videos

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓

jhey ʕ•ᴥ•ʔ

75,476 views • 1 year ago

progressive blur 💕 Figma

progressive blur 💕 Figma

Inga Hampton

46,132 views • 1 year ago

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

127,638 views • 5 months ago

need more frostin' for your "glass"? no problem .frosted-glass { background: hsl(0 0% 100% / 0.5); backdrop-filter: url(#displace) blur(12px) saturate(1.8); } increase the background alpha + output blur bump the saturation 🧑‍🍳

need more frostin' for your "glass"? no problem .frosted-glass { background: hsl(0 0% 100% / 0.5); backdrop-filter: url(#displace) blur(12px) saturate(1.8); } increase the background alpha + output blur bump the saturation 🧑‍🍳

jhey ʕ•ᴥ•ʔ

133,639 views • 11 months ago

Smart animate + Texture + Progressive blur in Figma LETS GOOOOOO!!!!

Smart animate + Texture + Progressive blur in Figma LETS GOOOOOO!!!!

miggi from figgi

24,103 views • 1 year ago

Expandable Search Bar + Progressive Blur Effect | SwiftUI | Xcode 16

Expandable Search Bar + Progressive Blur Effect | SwiftUI | Xcode 16

Kavsoft

16,563 views • 1 year ago

🔥We are adding Progressive Blur + Gradients to Hana! All interactive, all real-time. Demo in the comments.

🔥We are adding Progressive Blur + Gradients to Hana! All interactive, all real-time. Demo in the comments.

Spline

50,383 views • 1 year ago

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙

jhey ʕ•ᴥ•ʔ

495,678 views • 2 years ago

I built a smooth progressive blur generator for the web. Super fun to build. 🫆

I built a smooth progressive blur generator for the web. Super fun to build. 🫆

Voicu Apostol

48,342 views • 3 months ago

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

jhey ʕ•ᴥ•ʔ

154,954 views • 1 year ago

Blur - For Tomorrow (1993) One of the best Blur songs!

Blur - For Tomorrow (1993) One of the best Blur songs!

Jonny Mitchell

19,996 views • 2 months ago

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

jhey ʕ•ᴥ•ʔ

104,863 views • 2 years ago

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

125,904 views • 1 year ago

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

186,673 views • 2 years ago

Blur Blur Blur sheep are u feeling good😂😂😂😂

Blur Blur Blur sheep are u feeling good😂😂😂😂

SAPPHIRE💎💎 /CybersecurityGirl

37,077 views • 3 months ago

“Blur Blur Blurship” 🤣🤣🤣

“Blur Blur Blurship” 🤣🤣🤣

NWACHINEMERE

95,751 views • 5 months ago

blur blur blurship😭😂😂😂

blur blur blurship😭😂😂😂

ABISCO

71,804 views • 4 months ago

Everywhere don blur blur blurship!!😭😭😭

Everywhere don blur blur blurship!!😭😭😭

LIVELY

51,073 views • 4 months ago

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

jhey ʕ•ᴥ•ʔ

121,664 views • 1 year ago

Nice blur transition to expose the CoT without overwhelming the conversation scroll view.

Nice blur transition to expose the CoT without overwhelming the conversation scroll view.

Gavin Nelson

152,378 views • 1 year ago