Need help with ionic-contrib-frosted-glass?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

123 Stars 40 Forks MIT License 11 Commits 3 Opened issues


An optional frosted-glass effect for iOS 7 styled Ionic apps.

Services available


Need anything else?

Contributors list

Ionic Frosted Glass

An optional frosted-glass effect for iOS 7 styled Ionic apps.

Demo here

To use, include

in your app.

Then, apply the

attribute directive to a
 to get the frosted effect. Note: you must also
have a 
 directive on the page which is where the content will be taken from for the blur. Also, feel free to use
the extra class 
for header bars that comes with the CSS, which gives you a light grey header bar much like iMessage:

<content has-header="true" has-footer="true" padding="true">
  <ol class="messages">
    <li ng-repeat="message in messages" ng-bind-html="message.content">

Unfortunately, it's not feasible to auto blur the content if it changes. To notify the frosted glass system to redraw itself, you can use the

controller('MyCtrl', function($scope, $ionicFrostedDelegate, $ionicScrollDelegate) {
  $scope.addNew = function() {
    // Add new data

// Resize the scroll area

// Update the frosted glass system

// If you wish, scroll to the bottom of the scroll box to show the new content
$timeout(function() {
}, 1);

} });

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.