Design problem(opacity)

I am giving opacity to a header group its color is white… the group below is blue and i have given opacity so the color of blue group reflects on the upper white group… but it’s blue color is also reflecting over buttons (button color is white) and i don’t want that…
is there any way that opacity of whole group won’t reflect on buttons ?
I just want it removed from buttons
Thank You

1 Like


if the header is floating group? And you have added another group (with blue transparent (opacity) background? Or if this is flat group, where you added a background color (blue) with transparency?

If second is the case, you can add the background color (white) to the buttons.

it’s a floating group and one flat group is below it and it’s color is blue which is getting reflected on the upper floating group due to opacity. buttons and everything has background color white.

1 Like

color of the group is blue which is below, i have given opacity to the floating group

Set the background colour of the white group to #FFFFFF 80% or something. That’ll give 80% opacity without passing through to the child elements.

that’s the problem its still passing i need the color of buttons exactly blue and white



if i give the group same color as the opacity in floating group to that specific area then on responsiveness it’s getting disturbed

Have you set the background colour of the buttons?

yes they are white as well

Try setting the background colour to arbitrary text #FFFFFFCC. This produces white with 80% opacity. It works for me on the dynamic components app I’m working on, so if it doesn’t for you it’s probably something else in your config

So either there is a floating group with transparent background so that page background color mixes too, or something is not right with the groupings:

If there is a two groups with different background color (blue and white) in a parent group, this should not mix with each other. And if buttons are on the white-background group, having the white background as well, it should be ok?

Hey , I am highly interested in this topic , trying to achieve the somewhat dynamic header as seen in material design 3 or twitter , is this works ? .I have tried 99% opacity but it looks cheap

All this is is an 8 character hexadecimal colour code. The last two characters describe the transparency - Hexadecimal color code for transparency · GitHub

I’m almost certain this is what Bubble does behind the scenes anyway but I only learned about this because I had a need to dynamically specify the background colour opacity (as opposed to element opacity)

yes wait i will show you

basically it is becoming transparent due to opacity decreased … i just the button to maintain their color

1 Like

Can you add one more parent group (sorry) with no transparency behind the Group E?

i can try but there are other groups over group E and giving transparency to them but nothing happens

over group E

If you share with me editor mode link in PM; I can debug for you, and share with the community the resolution, or if not, then for you to try to create a more visual presentation of your issue with opacity, with multiple photos with key points? :smiley: I am sure it will be a very obvious solution on the end, just matter of time.