Frosted Glass Effect css only

Ionic Framework Ionic Angular
1

Hi everyone,

Im wondering if someone could help me with the Frosted Glass effect using css only in my ionic app with angular, is it possible?

image

i’ve been following the tutorial but it seems the blur effect doesnt seems applied to my background

<ion-content [fullscreen]="true" class="background-test">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div class="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>

</ion-content>

ion-content.background-test
{
  --background: url(../../assets/img/test.png) no-repeat center/cover fixed ;
}

if this is possible, could someone let me know what should I set in my container class css ?

thankyou!

2

What are you trying to achieve? I didn’t quite understand it.

It looks like the code you shared does not match the pic.

If you let me, ion-content shouldn’t be nesting the ion-header.

3

Look up backdrop filters…

1 Like
4

many thanks Mike!! let me try to look at it and play around with it

5