# Frosted Glass Effect css only

**URL:** <https://forum.ionicframework.com/t/frosted-glass-effect-css-only/192897>\
**Category:** Ionic Angular\
**Created:** [July 16, 2020, 12:44pm UTC](https://forum.ionicframework.com/t/frosted-glass-effect-css-only/192897 "2020-07-16T12:44:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![DRyxs](https://avatars.discourse-cdn.com/v4/letter/d/3e96dc/32.png) [@DRyxs](https://forum.ionicframework.com/u/DRyxs)\
**Post date:** [July 16, 2020, 12:44pm UTC](https://forum.ionicframework.com/t/frosted-glass-effect-css-only/192897/1 "2020-07-16T12:44:43Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/c/3/c31e56852c114862fbb0a0e7d7aeb796e92e02bc.jpeg)

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

```auto
<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>

```

```auto
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!

---

<div class="post-metadata">

**Author:** ![RaulGM](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/raulgm/32/144112_2.png) [@RaulGM](https://forum.ionicframework.com/u/RaulGM)\
**Post date:** [July 16, 2020, 5:04pm UTC](https://forum.ionicframework.com/t/frosted-glass-effect-css-only/192897/2 "2020-07-16T17:04:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 16, 2020, 6:26pm UTC](https://forum.ionicframework.com/t/frosted-glass-effect-css-only/192897/3 "2020-07-16T18:26:16Z")

</div>

Look up backdrop filters…

> **[The backdrop-filter CSS property | CSS-Tricks](https://css-tricks.com/the-backdrop-filter-css-property/)**
>
> I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more

> **[Create OS-style backgrounds with backdrop-filter](https://web.dev/backdrop-filter/)**
>
> Learn how to add background effects like blurring and transparency to UI elements on the web using the CSS backdrop-filter property.

---

<div class="post-metadata">

**Author:** ![DRyxs](https://avatars.discourse-cdn.com/v4/letter/d/3e96dc/32.png) [@DRyxs](https://forum.ionicframework.com/u/DRyxs)\
**Post date:** [July 17, 2020, 8:57am UTC](https://forum.ionicframework.com/t/frosted-glass-effect-css-only/192897/4 "2020-07-17T08:57:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Shivam1401](https://avatars.discourse-cdn.com/v4/letter/s/8491ac/32.png) [@Shivam1401](https://forum.ionicframework.com/u/Shivam1401)\
**Post date:** [May 6, 2022, 5:16pm UTC](https://forum.ionicframework.com/t/frosted-glass-effect-css-only/192897/5 "2022-05-06T17:16:34Z")

</div>

[![](https://global.discourse-cdn.com/ionicframework/original/3X/f/0/f0eb45932174e5b9ffaece625dcb6f2a9b3703c7.jpeg "Glass Morphism - New UI Design Trend 2021 in ionic framework one line of CSS!") ](https://www.youtube.com/watch?v=HSLH6h6sTMk)