The new CSS property that’s about to become overused on the mobile web
Love it or hate it, using selective gaussian blurs is an effective way to create depth in minimal, photo-centric UI designs. And now you can make it happen using CSS! However, this property is currently supported by only ~9% of browsers (but almost 75% of iPhones):
As the feature becomes adopted by more browsers, we may see an increase in dynamic blurred elements in UI designs. And since it’s already supported in iOS Safari, we may start seeing it popping up in mobile web more and more today.
(Pen works on Safari only…)
You can create a ‘piece of glass’ effect on an element by animating the degree of the blur on the element. Hover on the pen to watch the browser move the glass square towards and away from you! (Zoom is exaggerated for effect).
Also you can use this property to create the ‘blurry header’, like what you see in native iOS 9 UI (and many other apps). Going for that native feel on your mobile website? Just drop a -webkit-backdrop-filter:blur(8px); on your static header and voila:
Again, this is especially useful when trying to emulate native iOS look and feel. Outside of being useful for the mobile web— this style works for sign up pages, landing pages, or other types of micro sites as well:
Do you have any great examples of this property being used in mobile/web designs? Send them my way and I’ll add them to this post! But keep in mind it only works on safari for now…
Long live the blur!
If you enjoyed this or found it useful, please 💚
Disclosure: I learned about these new features of CSS (along with MUCH more) at an awesome workshop taught by Maximiliano Firtman at Fluent conference in San Francisco this week. For more advanced mobile web techniques, check out Maximiliano’s in-depth review on his blog. Thanks for the free ticket, Designers & Geeks!