# Modal Opacity flickering

**URL:** <https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099>\
**Category:** Elements\
**Created:** [April 10, 2025, 8:20am UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099 "2025-04-10T08:20:28Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [April 10, 2025, 8:20am UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/1 "2025-04-10T08:20:28Z")

</div>

Hi,

I am experiencing a fliggering when using the opacity slider in the modal component. I think I also have seen that in your video @dan. So I am sure you guys know about that, but we have it documented now 🍻

I would say the problem is the tailwind class, as you can see in the video.

While in the documentation for the colors they reference this:  
`<div class="bg-pink-500/[71.37%]"><!-- ... --></div>`

For custom opacity that is not set together with a color they state this:  
`<button class="opacity-[.67] ...">`

Seems to me a inconsitency. But yeah is easier to complain then solving.

Nevertheless when looking at the code that it genereted in Elements we have that:  
`<div class="fixed inset-0 bg-black/25 bg-surface-950/[34%] [34%] backdrop-blur-[5px] pointer-events-none" x-transition.opacity="" x-dialog:overlay=""></div>`

Where I would see an issue with the standalone `[34%]` behind the color. But yeah just an observation.

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [April 10, 2025, 8:29am UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/2 "2025-04-10T08:29:07Z")

</div>

Also something else. When no color is selected the `bg-black` is still there and the `bg--400` as well

 ![CleanShot 2025-04-10 at 16.27.34](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/2/726a6bb58152a76e236db122cc01720e7bcd6ad7.png)

---

<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:** [April 10, 2025, 8:40am UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/3 "2025-04-10T08:40:43Z")

</div>

> [@Beblebroks](#):
>
> I am experiencing a fliggering when using the opacity slider in the modal component.

I’ve also seen this, we need to take a closer look as to why this is happening!

> [@Beblebroks](#):
>
> While in the documentation for the colors they reference this:  
> `<div class="bg-pink-500/[71.37%]"><!-- ... --></div>`
> 
> For custom opacity that is not set together with a color they state this:  
> `<button class="opacity-[.67] ...">`

In this instance you can use a percentage value for the background colour opacity. Both syntaxes are actually valid here.

I do think we might want to be more consistent and use the decimal notation everywhere, and ensure the values are rounded to the closest whole number, so we’d be doing `bg-pink-500/[0.71]` in the above example.

> [@Beblebroks](#):
>
> Where I would see an issue with the standalone `[34%]` behind the color.

That shouldn’t be in the exported HTML, but it won’t cause an issue as there won’t be any CSS generate for an “unknown” or “invalid” tailwind class.

---

<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:** [April 10, 2025, 8:41am UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/4 "2025-04-10T08:41:06Z")

</div>

> [@Beblebroks](#):
>
> When no color is selected the `bg-black` is still there and the `bg--400` as well

Thanks! I’ll check this one as well 🙂

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [April 10, 2025, 2:00pm UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/5 "2025-04-10T14:00:31Z")

</div>

Hi @ben,

This won’t work `bg-pink-500/[0.71]` only `bg-pink-500/[71%]` is valid. That’s why I meant inconsistent. Tested that in the browser. The first one just removed the color.

Cheers 🍻

---

<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:** [April 10, 2025, 2:46pm UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/6 "2025-04-10T14:46:57Z")

</div>

We’ve found the issue and will get a fix in ASAP.

This actually has nothing to do with the CSS, it’s an issue with an `@portal` call.

Also, I know this is pedantic, but just for anyone reading: both `bg-pink-500/[0.71]` and `bg-pink-500/[71%]` are in fact valid tailwind classes. You can do either, as demonstrated here: [Tailwind Play](https://play.tailwindcss.com/SyCPy3WjtF)

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [April 10, 2025, 3:04pm UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/7 "2025-04-10T15:04:09Z")

</div>

Actually, you should be building for tailwind 4.1 now - and to be uniform, it should be in format bg-pink-500/71 You get richer colors as a bonus. And fyi - \*-opacity-\* has been removed.

---

<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:** [April 10, 2025, 5:49pm UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/8 "2025-04-10T17:49:44Z")

</div>

> [@Bill](#):
>
> Actually, you should be building for tailwind 4.1 now

Elements isn’t building tailwind 4.x at the moment. We do have plans for this though.

> [@Bill](#):
>
> fyi - _-opacity-_ has been removed.

I’m fully up to date on the v4 changes and have already made plans for how to handle most of (if not all) of the changes.

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [April 10, 2025, 6:21pm UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/9 "2025-04-10T18:21:39Z")

</div>

Hi @ben,

thanks for testing it again. No idea why that did not work on my side when I tested it. And glad you found the issue.

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [April 10, 2025, 6:29pm UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/10 "2025-04-10T18:29:55Z")

</div>

Hi @ben,

saw the light box the first time. Is gorgeous. But same problem and not only on the opacity but also on the blur.

---

<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:** [April 10, 2025, 8:03pm UTC](https://forums.realmacsoftware.com/t/modal-opacity-flickering/47099/11 "2025-04-10T20:03:17Z")

</div>

> [@Beblebroks](#):
>
> saw the light box the first time. Is gorgeous. But same problem and not only on the opacity but also on the blur.

Good news, we’ve located the issue and it’s due to be fixed in the next build (or two) 🎉