# Gradient bar below header?

**URL:** https://meta.discourse.org/t/gradient-bar-below-header/209394
**Category:** Support
**Created:** [November 17, 2021, 7:21am UTC](https://meta.discourse.org/t/gradient-bar-below-header/209394 "2021-11-17T07:21:17Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)
#### Post date: [November 17, 2021, 7:21am UTC](https://meta.discourse.org/t/gradient-bar-below-header/209394/1 "2021-11-17T07:21:17Z")

</div>

We currently have the CSS set up to give us a bar below our header instead of the shadow:

```plaintext
.d-header {
  box-shadow: none;
  border-bottom: solid var(--my_header_box_color)
}

```

If we wanted to make this a gradient, what would be the easiest way to accomplish that instead? We can get other things to be gradients, just not this line.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 17, 2021, 9:30am UTC](https://meta.discourse.org/t/gradient-bar-below-header/209394/2 "2021-11-17T09:30:26Z")

</div>

Hello,

I think I would use `mixin` for this.

Here is an example:

```plaintext
@mixin gradient-border() {
  border-image: linear-gradient(to right, orange, black);
  border-bottom: 5px solid;
  border-image-slice: 1;
}

```

Then you can use it on `.d-header` or where you want with `@include gradient-border()`

```plaintext
.d-header {
  box-shadow: none;
  @include gradient-border();
}

```

 ![Screenshot 2021-11-17 at 10.20.05](https://global.discourse-cdn.com/meta/original/3X/1/0/1023e7c94d2663eeac60f4d38f44eea46a909dd0.png)

---

<div class="post-metadata">

### Author: ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)
#### Post date: [November 17, 2021, 5:57pm UTC](https://meta.discourse.org/t/gradient-bar-below-header/209394/3 "2021-11-17T17:57:58Z")

</div>

Any idea why that might cause this to happen on mobile?

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/c/1cb02be7462f7d41e108af7fa98456c555728587.jpeg)

---

<div class="post-metadata">

### Author: ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)
#### Post date: [November 17, 2021, 6:05pm UTC](https://meta.discourse.org/t/gradient-bar-below-header/209394/4 "2021-11-17T18:05:59Z")

</div>

Using the following for mobile only worked:

```plaintext
    border-left: 0px solid;
    border-right: 0px solid;
    border-top: 0px solid;

```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [December 17, 2021, 6:06pm UTC](https://meta.discourse.org/t/gradient-bar-below-header/209394/5 "2021-12-17T18:06:29Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.