# Custom Component Background Opacity?

**URL:** <https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076>\
**Category:** Elements API\
**Created:** [July 21, 2026, 8:20pm UTC](https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076 "2026-07-21T20:20:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 21, 2026, 8:20pm UTC](https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076/1 "2026-07-21T20:20:43Z")

</div>

@ben I have a custom component that I created for handling a copyright notice; it has always worked fine until the v3 BETA release. Now the opacity controls for the background color have no effect at all. I notice this seems to be a problem in a lot of other custom components not just my own.

I was surprised, as my component uses the Global Control for a background, where I assumed it would automatically pick up any changes, as this seems to work fine in the standard container or flex in v3.

This is how I’m handling the background in my properties.

```json
{
      "title": "Background",
      "icon": "paintbrush.fill",
      "properties": [
          {
              "globalControl": "BackgroundContainer"
          }
      ]
    },

```

Is there something special I need to do to make this work?

I did try rebuilding the component in case that would pickup any changes that have been made in the upgrade to Tailwind 4.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 23, 2026, 8:03pm UTC](https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076/2 "2026-07-23T20:03:32Z")

</div>

@ben Any thoughts on this and how to fix opacity?

---

<div class="post-metadata">

**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\
**Post date:** [July 24, 2026, 12:32am UTC](https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076/3 "2026-07-24T00:32:06Z")

</div>

@handshaper

Ben’s on holiday until next week. 🙂

---

<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:** [July 24, 2026, 10:58am UTC](https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076/4 "2026-07-24T10:58:37Z")

</div>

Hey @handshaper,

While @ben is away, I’ll do my best to help you on this…

This is basically due to Tailwind v4 removing a few depreciated utilities, such as `bg-opacity`, see this for more info: [Upgrade guide - Getting started - Tailwind CSS](https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities)

You need to apply the opacity using another approach, there are a few different way you can do this. One way is to do the following in your properties.json:

```auto
{
  "title": "Background",
  "icon": "paintbrush.fill",
  "properties": [
    {
      "title": "Background Color",
      "id": "backgroundColor",
      "format": "bg-{{value}}/(--bg-opacity)",
      "themeColor": {
        "default": {
          "name": "surface",
          "brightness": 50
        }
      }
    },
    {
      "title": "Background Opacity",
      "id": "backgroundOpacity",
      "format": "[--bg-opacity:{{value}}%]",
      "slider": {
        "use": "Slider",
        "default": 100,
        "min": 0,
        "max": 100,
        "units": "%"
      }
    }
  ]
}

```

Note how the opacity is now setting a CSS Custom Property (via Tailwind’s arbitrary class syntax), and the colour is using that CSS Custom Property via the `/{opacity-modifier}`. The final output for these controls is now `bg-surface-50/(--bg-opacity)` and `[--bg-opacity:100%]`

Hopefully that will get you back up and running!

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 24, 2026, 3:56pm UTC](https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076/5 "2026-07-24T15:56:06Z")

</div>

Aloha @dan

Great, I’ll try this approach.

But it still brings up the question of why the `"globalControl": "BackgroundContainer"` is not doing the right thing. I thought one of the reasons for using global controls was because of consistency across different components.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 25, 2026, 12:16am UTC](https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076/6 "2026-07-25T00:16:55Z")

</div>

This worked great.

I found I also needed to do the same thing for the text color and opacity; I just got that sorted now. Where globalControl for text was not acting as expected.

Interestingly, the globalControl for borders does do the right thing with the opacity, so I did not need to fix that one.

---

<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:** [July 27, 2026, 10:49am UTC](https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076/7 "2026-07-27T10:49:31Z")

</div>

Hi @handshaper

I’ve just published an update the rw-elements-tools package, we’re now on v1.5.0. If you update to the version and rebuild your components, all of the opacity controls should work as expected.

Give it a go and let me know how get on!

[https://www.npmjs.com/package/rw-elements-tools](https://www.npmjs.com/package/rw-elements-tools)

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 27, 2026, 3:53pm UTC](https://forums.realmacsoftware.com/t/custom-component-background-opacity/57076/8 "2026-07-27T15:53:46Z")

</div>

This seems to be working on the globalControls I have converted back; few more to go, but so far it’s looking promising. Thank you.