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: https://twitter.com/juxtopposed
CodePen: https://codepen.io/Juxtopposed
Dribbble: https://dribbble.com/juxtopposed
Github: https://github.com/juxtopposed
// Helpful resources:
https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc
https://www.cs.toronto.edu/~guerzhoy/320/lec/filters.pdf
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: ?
// My fav products:
Notion: https://affiliate.notion.so/juxtopposed
The largest library of design inspo I can’t live without: https://mobbin.com/?via=juxtopposed
For affordable web hosting: https://www.hostg.xyz/SHGzx
(if you need any of these products and want to support the channel, you can use my affiliate links above. I may earn a commission at no extra cost to you. win-win!)