# Change the background color of a Big Number based on the content of the Big Number

**URL:** <https://community.glideapps.com/t/change-the-background-color-of-a-big-number-based-on-the-content-of-the-big-number/86741>\
**Category:** Ask for Help\
**Created:** [March 26, 2026, 2:58am UTC](https://community.glideapps.com/t/change-the-background-color-of-a-big-number-based-on-the-content-of-the-big-number/86741 "2026-03-26T02:58:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MattLB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mattlb/32/41284_2.png) [@MattLB](https://community.glideapps.com/u/MattLB)\
**Post date:** [March 26, 2026, 2:58am UTC](https://community.glideapps.com/t/change-the-background-color-of-a-big-number-based-on-the-content-of-the-big-number/86741/1 "2026-03-26T02:58:36Z")

</div>

SSIA

If the B# is ‘good’ I would like the background to be green, if ‘bad’ then red.

Good/bad/okay are all computed in Glide and different for each value so colors are assigned on the fly.

Not sure if that can be done in CSS.

TIA

Matt

---

<div class="post-metadata">

**Author:** ![Mazen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mazen/32/84042_2.png) [@Mazen](https://community.glideapps.com/u/Mazen)\
**Post date:** [March 26, 2026, 10:02am UTC](https://community.glideapps.com/t/change-the-background-color-of-a-big-number-based-on-the-content-of-the-big-number/86741/2 "2026-03-26T10:02:46Z")

</div>

I think this is exactly what you’re looking for.

> [@blue\_square green\_square purple\_square How to Color Rows in a Table Collection](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512):
>
> There are multiple ways to color rows inside a Table Collection. To indicate row status (e.g., High, Medium, Low), you can use one of three approaches: Button column (aria-label) — reads the button’s aria-label to determine row color. Image fragment in the src — adds a fragment to the image URL (e.g., #High). Boolean column — uses a true/false value to control row color. thread Part 1 — Color Rows via Button Column This method reads the button’s aria-label and styles the entire \<tr\> accor…

---

<div class="post-metadata">

**Author:** ![MattLB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mattlb/32/41284_2.png) [@MattLB](https://community.glideapps.com/u/MattLB)\
**Post date:** [March 26, 2026, 2:04pm UTC](https://community.glideapps.com/t/change-the-background-color-of-a-big-number-based-on-the-content-of-the-big-number/86741/3 "2026-03-26T14:04:26Z")

</div>

Thanks for looking into this. Unfortunately this isn’t a table collection; it is a Big Number component. I am trying to find a way to dynamically change the color based on the data displayed within the Big Number (red/yellow/green) for a dashboard.

I see how static CSS can be applied but not dynamic color information.

Regards,

Matt

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [March 26, 2026, 2:30pm UTC](https://community.glideapps.com/t/change-the-background-color-of-a-big-number-based-on-the-content-of-the-big-number/86741/4 "2026-03-26T14:30:07Z")

</div>

The Big Number component doesn’t have attributes that support dynamic styling.  
You’ll need to use a workaround or create your own HTML that mimics the component (which can take quite some time).

It would help if you explain your design first, so the appropriate workaround can be suggested.