# Header scroll shadow

**URL:** <https://meta.discourse.org/t/header-scroll-shadow/198021>\
**Category:** UX\
**Created:** [July 23, 2021, 8:48pm UTC](https://meta.discourse.org/t/header-scroll-shadow/198021 "2021-07-23T20:48:59Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Muhammed\_EKİCİ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/muhammed_eki%CC%87ci%CC%87/32/250438_2.png) [@Muhammed\_EKİCİ](https://meta.discourse.org/u/Muhammed_EK%C4%B0C%C4%B0)\
**Post date:** [July 23, 2021, 8:48pm UTC](https://meta.discourse.org/t/header-scroll-shadow/198021/1 "2021-07-23T20:48:59Z")

</div>

A shadow appears in the header when scrolling through the [https://forum.ghost.org/](https://forum.ghost.org/) forum. I see they are using the following CSS.

 ![Screenshot_1](https://global.discourse-cdn.com/meta/original/3X/8/c/8c146d2889f27d8357c0446a820e39346e42c7c6.jpeg)

```plaintext
.d-header {
    height: 56px;
    padding: 0;
    border-bottom: 1px solid #e5eff5;
    background: rgba(255,255,255,0.97);
    box-shadow: none;
    transition: all 0.4s ease;
}

```

Scrolling CSS;

 ![Screenshot_2](https://global.discourse-cdn.com/meta/original/3X/f/5/f5a8930731bc14151513a1dc56e39b8bbefd778e.jpeg)

```plaintext
.d-header.scrolling {
    box-shadow: 8px 14px 38px rgb(39 44 49 / 4%), 1px 3px 8px rgb(39 44 49 / 4%);
    transition: all 0.2s ease;
}

```

I don’t get the same result when I add the above CSS to my own forum.

---

_[View the full topic](https://meta.discourse.org/t/header-scroll-shadow/198021)._