# How did they make a gradient header?

**URL:** https://meta.discourse.org/t/how-did-they-make-a-gradient-header/168498
**Category:** Support
**Created:** [October 28, 2020, 8:37am UTC](https://meta.discourse.org/t/how-did-they-make-a-gradient-header/168498 "2020-10-28T08:37:05Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![anon89147131](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@anon89147131](https://meta.discourse.org/u/anon89147131)
#### Post date: [October 28, 2020, 8:37am UTC](https://meta.discourse.org/t/how-did-they-make-a-gradient-header/168498/1 "2020-10-28T08:37:05Z")

</div>

Hi there,

I’m wondering how you made a gradient header on [try.discourse.org](http://try.discourse.org), could you provide information or code about it as it’s a useful feature.

Thanks!

---

<div class="post-metadata">

### Author: ![rolando](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rolando/32/193660_2.png) [@rolando](https://meta.discourse.org/u/rolando)
#### Post date: [October 28, 2020, 10:42am UTC](https://meta.discourse.org/t/how-did-they-make-a-gradient-header/168498/2 "2020-10-28T10:42:08Z")

</div>

that can be easily achieved with css

```
.d-header {
      background: linear-gradient(to bottom right, #000, #fff);
}

```

---

<div class="post-metadata">

### Author: ![anon89147131](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@anon89147131](https://meta.discourse.org/u/anon89147131)
#### Post date: [October 28, 2020, 11:52am UTC](https://meta.discourse.org/t/how-did-they-make-a-gradient-header/168498/3 "2020-10-28T11:52:57Z")

</div>

![Screenshot 2020-10-28 at 11.52.42](https://global.discourse-cdn.com/meta/original/3X/8/3/839f754f6551742239aa389983fc2b47c84eed48.jpeg)  
Thanks - it works but it seems dark mode buttons stay, what would be the way to fix it and for all banner buttons to have the gradient as well when hovered over?

---

<div class="post-metadata">

### Author: ![rolando](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rolando/32/193660_2.png) [@rolando](https://meta.discourse.org/u/rolando)
#### Post date: [October 28, 2020, 12:26pm UTC](https://meta.discourse.org/t/how-did-they-make-a-gradient-header/168498/4 "2020-10-28T12:26:23Z")

</div>

you can go to admin/customize/colors and change the **header primary** _Text and icons in the site’s header_ there

you can also inspect each element on your browser you wish to customize and add the custom css on your theme \> common \> css