# Can i do gradient username colors?

**URL:** https://meta.discourse.org/t/can-i-do-gradient-username-colors/236151
**Category:** Support
**Created:** [August 14, 2022, 6:04pm UTC](https://meta.discourse.org/t/can-i-do-gradient-username-colors/236151 "2022-08-14T18:04:37Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![grousx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/grousx/32/269630_2.png) [@grousx](https://meta.discourse.org/u/grousx)
#### Post date: [August 14, 2022, 6:04pm UTC](https://meta.discourse.org/t/can-i-do-gradient-username-colors/236151/1 "2022-08-14T18:04:37Z")

</div>

I already researched and found that code;

```plaintext
// Gruplara ait renkler
.names {
span.Premium a {
    background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  span.moderator a::after {
    content:"★";
    margin-left: 2px;
  }
}

```

and pasted to CSS but it isn’t working.

---

<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: [August 14, 2022, 6:53pm UTC](https://meta.discourse.org/t/can-i-do-gradient-username-colors/236151/2 "2022-08-14T18:53:29Z")

</div>

Hello,

In here it seems to the `Premium` is the user primary group and the other part is works only for moderators. I think this is why is not working for you.

```scss
.names {
  // This part is works only for users who's primary group is Premium
  span.Premium a {
    background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  // This part is works only for moderators
  span.moderator a::after {
    content:"★";
    margin-left: 2px;
  }
}

```

* * *

If you want to appear it for everyone that you shouldn’t use any group. So remove the `Premium` word will fix this.

```scss
.names {
  // This part is works for everyone
  span a {
    background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  // This part is works only for moderators
  span.moderator a::after {
    content:"★";
    margin-left: 2px;
  }
}

```

![Screenshot 2022-08-14 at 20.51.41](https://global.discourse-cdn.com/meta/original/4X/8/a/4/8a469741b4440df9687b595519b524a4c97f6a24.png)

Now I am moderator too so the ⭐ is also appear.

![Screenshot 2022-08-14 at 20.52.05](https://global.discourse-cdn.com/meta/original/4X/6/0/3/6039116ad3b9954a201ce5c8f7c437180be59780.png)

* * *

If you want to restrict it for groups than you can follow the default code you shared but change the `Premium` word to your group name and don’t forget to set to make group for primary to members. 🙂

Like this 🔽

```scss
.names {
  // This part is works only for users who's primary group
  span.group_name a {
    background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  // This part is works only for moderators
  span.moderator a::after {
    content:"★";
    margin-left: 2px;
  }
}

```

---

<div class="post-metadata">

### Author: ![grousx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/grousx/32/269630_2.png) [@grousx](https://meta.discourse.org/u/grousx)
#### Post date: [August 15, 2022, 6:42pm UTC](https://meta.discourse.org/t/can-i-do-gradient-username-colors/236151/3 "2022-08-15T18:42:50Z")

</div>

Thanks it is working but it doesnt showing in profile how can i set that?

 ![Screenshot_2022_0815_214145](https://global.discourse-cdn.com/meta/original/4X/7/0/8/70848abfc9945754c13f58ecaf2e735b17f586f6.png)

---

<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: [September 14, 2022, 6:43pm UTC](https://meta.discourse.org/t/can-i-do-gradient-username-colors/236151/4 "2022-09-14T18:43:48Z")

</div>

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