# How to have an iOS like Tranlucent-blurry Header
**URL:** https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108
**Category:** UX
**Created:** [September 13, 2018, 10:46am UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108 "2018-09-13T10:46:06Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@rootsh3ll](https://meta.discourse.org/u/rootsh3ll)
#### Post date: [September 13, 2018, 10:46am UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/1 "2018-09-13T10:46:06Z")
Hi,
I was trying to edit the header of my discourse like the tranlucent-ish and blurry navigation bar on [https://apple.com/](https://apple.com/)
but simply editing .d-header { } didn’t help much.
I use safari mostly and a tranlucent header not only looks cool but also complements the whole iOS’s status bar transparency.
What would be the mobile only CSS for something like that?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [September 13, 2018, 10:57am UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/2 "2018-09-13T10:57:19Z")
Perhaps @Johani can advise.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [September 13, 2018, 1:07pm UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/3 "2018-09-13T13:07:54Z")
Frankly, it’s a bit easier to make a design like that work on one static page with very large text and a black background. So a gentle heads up, you’re in for a bit of work.
The header background is set via a color-scheme variable. The name of that variable is `$header_background`
Color-scheme colors are always opaque since they are RGB hex colors - `#ffffff` for example.
What you need is an RGBA color since those have an alpha parameter which you can use to control the opacity of the color.
a semi-translucent RGBA black color looks like this
`rgba(0,0,0, .8)`
Since Discourse uses scss, you can use something like this to control the opacity of the header background color:
```plaintext
.d-header {
background-color: rgba($header_background, 0.8);
}
```
which takes the header background - whatever it may be for your current color-scheme - and sets its opacity to `0.8`
This creates something like the what you see below
However, that’s not they only thing used on the Apple website, they also use a gradient under the header to give the illusion of page elements fading out as they go under the header.
which you can achieve using something like this: (I grabbed this from Apple’s website and modified it a bit)
```plaintext
.d-header:after {
content: "";
position: absolute;
top: 100%;
height: 100px;
width: 100%;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.79) 8.1%,
rgba(0, 0, 0, 0.761) 15.5%,
rgba(0, 0, 0, 0.717) 22.5%,
rgba(0, 0, 0, 0.66) 29%,
rgba(0, 0, 0, 0.593) 35.3%,
rgba(0, 0, 0, 0.518) 41.2%,
rgba(0, 0, 0, 0.44) 47.1%,
rgba(0, 0, 0, 0.36) 52.9%,
rgba(0, 0, 0, 0.282) 58.8%,
rgba(0, 0, 0, 0.207) 64.7%,
rgba(0, 0, 0, 0.14) 71%,
rgba(0, 0, 0, 0.083) 77.5%,
rgba(0, 0, 0, 0.039) 84.5%,
rgba(0, 0, 0, 0.01) 91.9%,
transparent 100%
);
}
```
If you add that, you’d need to modify the padding of the `#main-outlet` a bit so that items at the top of the page are not covered by the gradient before you scroll.
Something like this should work
```plaintext
#main-outlet {
padding-top: 8em;
}
```
The example on Apple’s website works really well because it’s black on black and the text is very large like I mentioned earlier. You might have spend a bit of time playing around with the colors to get it to look as nice on your site.
I created a _basic_ black on black demo on theme creator for this which you can see [here](https://theme-creator.discourse.org/theme/Johani/header-fade)
It works on both desktop and mobile but if you only want it to be on the mobile view, add the code to the mobile section of your theme / theme component.
---
### Author:  [@rootsh3ll](https://meta.discourse.org/u/rootsh3ll)
#### Post date: [September 13, 2018, 7:26pm UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/4 "2018-09-13T19:26:17Z")
Great. Transparency working perfectly fine. Thanks @Johani Can we add a blur to it? As I mentioned in the title, an iOS like blur, like in the image for example (Gaussian blur):
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [September 13, 2018, 8:07pm UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/5 "2018-09-13T20:07:38Z")
Love this idea, thanks @rootsh3ll, @Johani
> [@rootsh3ll](#):
>
> Gaussian blur
There is apparently a CSS filter for this:
> **[backdrop-filter CSS property - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter)**
>
> The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be...
as in:
```plaintext
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
```
But looks like support is patchy! Browser support (surprisingly Chrome doesn’t support it ootb)?:
> **[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=css-backdrop-filter)**
>
> "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
This works in Safari (!). Thanks to @Johani for pointing out the naughty space in my original code snippet 🙂
---
### Author:  [@rootsh3ll](https://meta.discourse.org/u/rootsh3ll)
#### Post date: [September 13, 2018, 8:11pm UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/6 "2018-09-13T20:11:12Z")
Right. I was just testing this:
```
-webkit-filter: blur(10px);
filter: blur(10px);
```
inside .d-header and this:
> [@Johani](#):
>
> .d-header:after { content: “”; position: absolute; top: 100%; height: 100px; width: 100%; pointer-events: none; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.79) 8.1%, rgba(0, 0, 0, 0.761) 15.5%, rgba(0, 0, 0, 0.717) 22.5%, rgba(0, 0, 0, 0.66) 29%, rgba(0, 0, 0, 0.593) 35.3%, rgba(0, 0, 0, 0.518) 41.2%, rgba(0, 0, 0, 0.44) 47.1%, rgba(0, 0, 0, 0.36) 52.9%, rgba(0, 0, 0, 0.282) 58.8%, rgba(0, 0, 0, 0.207) 64.7%, rgba(0, 0, 0, 0.14) 71%, rgba(0, 0, 0, 0.083) 77.5%, rgba(0, 0, 0, 0.039) 84.5%, rgba(0, 0, 0, 0.01) 91.9%, transparent 100% ); }
but didn’t work.
when I put the code inside .d-header, it blurs the whole header, including the text and the logo also.
Couldn’t figure out a way to prevent texts, logo and just blur out the background content that comes beneath the header.
See if you find any success with it.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [September 13, 2018, 8:39pm UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/7 "2018-09-13T20:39:00Z")
As @merefield said earlier, [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) would apply the blur effect to the underlying elements, but support is spotty (no Firefox, Chrome supports it only with a change to user’s browser preferences).
It would give you something like this, where supported:
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [September 14, 2018, 12:03pm UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/8 "2018-09-14T12:03:17Z")
Updated [my CSS above](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/5) which now works in Safari (and in Chrome with Experimental Web Platform Features enabled)
I’ve just updated the logo on one of my sites so it has a tranparent background to take full advantage of this effect 🙂
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [September 14, 2018, 3:34pm UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/9 "2018-09-14T15:34:23Z")
> [@merefield](#):
>
> But looks like support is patchy! Browser support (surprisingly Chrome doesn’t support it ootb)?:
From what I remember of blink-dev discussions, there’s some architectural issues that complicate its implementation? Obviously it exists behind a flag right now, but it might not perform very well in Chrome or something. (Someone was saying “I didn’t realize when I was adding support for Backdrop Filters that they aren’t even turned on by default right now!”)
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [September 15, 2018, 10:53pm UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/10 "2018-09-15T22:53:49Z")
Hey, remember when I said that Chrome didn’t think that backdrop filters were ready to ship yet?
> **[New CSS Attack Restarts an iPhone or Freezes a Mac](https://www.bleepingcomputer.com/news/security/new-css-attack-restarts-an-iphone-or-freezes-a-mac/)**
>
> A new attack has been discovered that will cause iOS to restart or respring and macOS to freeze simply by visiting a web page that contains certain CSS & HTML. Windows and Linux users are not affected by this bug.
> [@](#):
>
> “The attack uses a weakness in the -webkit-backdrop-filter CSS property,” Haddouche told BleepingComputer. "By using nested divs with that property, we can quickly consume all graphic resources and crash or freeze the OS.
---
### Author:  [@terraboss](https://meta.discourse.org/u/terraboss)
#### Post date: [October 25, 2018, 6:54am UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/11 "2018-10-25T06:54:13Z")
Is there any progress on that?
I love to integrate this as soon as possible. At least for those browsers, that support this blur filter.