# CSS code for the cbackground color

**URL:** <https://forums.realmacsoftware.com/t/css-code-for-the-cbackground-color/56773>\
**Category:** Elements\
**Created:** [June 23, 2026, 3:12pm UTC](https://forums.realmacsoftware.com/t/css-code-for-the-cbackground-color/56773 "2026-06-23T15:12:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![garageshop](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/garageshop/32/366_2.png) [@garageshop](https://forums.realmacsoftware.com/u/garageshop)\
**Post date:** [June 23, 2026, 3:12pm UTC](https://forums.realmacsoftware.com/t/css-code-for-the-cbackground-color/56773/1 "2026-06-23T15:12:05Z")

</div>

Hi

I am creating a custom button element, but I can’t seem to get the background color to match the brand. This is what I have.

background-color: rgb(var(–color-brand-500));  
color: rgb(var(–color-surface-50));

The text is black, but nothing shows in the background of the button.

Thanks for the help.

Blessings,  
–Mark

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [June 29, 2026, 7:47am UTC](https://forums.realmacsoftware.com/t/css-code-for-the-cbackground-color/56773/2 "2026-06-29T07:47:38Z")

</div>

> [@garageshop](#):
>
> This is what I have.
> 
> background-color: rgb(var(–color-brand-500));  
> color: rgb(var(–color-surface-50));

Have you added this as custom CSS or in the Advanced-\>Classes box? or somewhere else?

If it’s in the Classes box, you need to add use the following syntax:

```auto
bg-[rgb(var(--color-brand-500))]
text-[rgb(var(--color-surface-50))]

```

---

<div class="post-metadata">

**Author:** ![garageshop](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/garageshop/32/366_2.png) [@garageshop](https://forums.realmacsoftware.com/u/garageshop)\
**Post date:** [June 29, 2026, 2:35pm UTC](https://forums.realmacsoftware.com/t/css-code-for-the-cbackground-color/56773/3 "2026-06-29T14:35:04Z")

</div>

Hi,

Thanks for getting back to me.

I don’t have anything in that panel. In the template for the component I have:

.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background: tan; color: white; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 28px; z-index: 999999 !important; opacity: 0; transform: translateY(40px); pointer-events: none !important; transition: opacity 0.4s ease, transform 0.4s ease; } Rather than hard coded background and color (which work), I would rather have the theme brand var. Thanks. Blessings, --Mark

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [June 30, 2026, 10:39am UTC](https://forums.realmacsoftware.com/t/css-code-for-the-cbackground-color/56773/4 "2026-06-30T10:39:44Z")

</div>

when we move to tailwind 4 you’ll have access to the colours via CSS custom properties (aka. CSS variables), meaning you’ll have access to those in your custom CSS.

Until then you’ll need to either hard code the colour in your css, or ideally just use the class names in your template:

```php-template
<button class="back-to-top bg-brand-500 text-surface-50">Click me</Button>

```

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [June 30, 2026, 10:43am UTC](https://forums.realmacsoftware.com/t/css-code-for-the-cbackground-color/56773/5 "2026-06-30T10:43:29Z")

</div>

> [@ben](#):
>
> when we move to tailwind 4

I saw birds and heard some whispers… can we assume this is coming soon?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 30, 2026, 12:24pm UTC](https://forums.realmacsoftware.com/t/css-code-for-the-cbackground-color/56773/6 "2026-06-30T12:24:42Z")

</div>

> [@Pegasus](#):
>
> I saw birds and heard some whispers… can we assume this is coming soon?

I can neither confirm nor deny the rumours that Tailwind 4 is coming to Elements soon 🤭

---

<div class="post-metadata">

**Author:** ![garageshop](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/garageshop/32/366_2.png) [@garageshop](https://forums.realmacsoftware.com/u/garageshop)\
**Post date:** [June 30, 2026, 6:52pm UTC](https://forums.realmacsoftware.com/t/css-code-for-the-cbackground-color/56773/7 "2026-06-30T18:52:07Z")

</div>

Thanks so much for getting back to me.

I am new to this CSS stuff, an dappreciate the help!

Blessings,  
–Mark