Design+Code logo

Quick links

No results found

Suggested search

Background blur is a very trendy effect in any design. The blur effect looks like a frosted glass. It’s a layer of blur view being inserted between the content and the background underneath. You would most see it on cards, modals, navigation bars and tab bars. Not only it’s beautiful, but it’s also practical in bringing focus to the content in front. For example in our iOS app, you would see it on the tab bar, the profile icon, the tutorial cards, the livestream cards and on the more screen. In fact, background blur is the main facet in glass morphism design style.

In the design, both the bottom sheet and the custom nav bar contains a blurred background. In this section, we’ll learn how to blend in a built-in material blur as well as a custom blur backdrop.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.


Design template


Source code for all sections


Video files, ePub and subtitles

Browse all downloads