Let's talk about 10 different levels of blurring (Gaussian blur) in design and code.

// Find all the codes in this CodePen collection:
https://codepen.io/collection/vBPmZQ

// ✨ Let's connect:
Twitter:   / juxtopposed  
CodePen: https://codepen.io/Juxtopposed
Dribbble: https://dribbble.com/juxtopposed
Github: https://github.com/juxtopposed

// Helpful resources:
https://gist.github.com/dmnsgn/76878b...
https://www.cs.toronto.edu/~guerzhoy/...

Thanks for watching!
———

#uidesign #blur #gaussian


Timestamps:
00:00 Blur History
01:57 Level 1
02:18 Level 2: Backdrop Blur
02:45 Level 3: Gradient Blur
03:19 Level 4: Shadows
03:56 Level 5: Clip-path
05:24 Level 6: SVGs
06:39 Level 7: Shaders
07:31 Level 8: Shader Effects
07:56 Level 9: Animation
08:29 Level 10: ?