Frosted glass on ionic v2

Ionic Framework ionic-v3
1

Under ionic 2 is there a way to cleanly replace my grey toolbar with a frosted glass background?

Previously there were ways under ionic 1 but quite a lot has changed with Ionic 2. Is there a way to simply do this with css?

2

This is a way to do it

Add your frosted glass background color to your variables.scss file

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  frosted:    #d3ddef
);

and add it to your navbar like this:

<ion-navbar color="frosted"></ion-navbar>
3

That’s quite cool it looks alot like there’s a blue image underneath.

It’s quite static though, did you do anything more so that you can see stuff move underneath when you scroll through content?

4

Not quite sure I understand the question, but you can try to add CSS and change the opacity of elements.

Sorry if it’s not what you meant.

5

I have a tutorial on this: http://www.joshmorony.com/create-a-stylish-news-feed-layout-in-ionic-2/

Uses the backdrop-filter property so the “frosted” effect only works on iOS, but on Android it will still display at a lower opacity so it still looks pretty good I think.

2 Likes
6

I’m sorry, now I get what you meant by frosted glass background.

7

I got to say that is absolutely amazing! I was fretting over the need for javascript to make it work but your method is just what I was looking for.