Showing results for 
Search instead for 
Did you mean: 

Opacity Function/Property

There are 4 ways to get color:

  • Color.Name
  • ColorValue()
  • ColorFade()
  • RGBA()

It's pretty versatile. Only one of the functions can change opacity though--that's RGBA(). The next step to improving color ability is by having a Function for adjusting the opacity. I tried with ColorFade, but it only turns things black/white and is not able to affect transparency.


I think a Function may be better than a Property because it could fit in existing properties for Fill and Color.

Status: Completed

See usage notes for Code Fade here:


I've leveraged this for the opacity of my disabled button fill so that the user can read the button text even when the button is disabled (I set it at 80% for example). Let me know if you need more syntax examples.






Advocate I

@Jj999999 it seems @Audrie-MSFT is not following this anymore. Maybe other staff like @GregLi can help/

Frequent Visitor

This is a good idea, but it is incorrectly marked as completed.

Regular Visitor

If you use an image box without an image you can set the opacity and the fill color to whatever level you want. I just tested this out and it worked great. 

Advocate I

@JamesPadgett, This isn't a solution. What if I want to, for example, use a built in color name on hover or press on a button? Image box transparency is transparency, sure, but it has nothing to do with the issue being raised. If I want to have a 50% transparent black rectangle I don't even need an image, I can just make a rectangle and set its fill to RGBA(0, 0, 0, .5).

@JoshBrown It is incorrectly marked as completed but I have somewhat of aworkaround if you're working in hex (mainly only works when referencing components). The reason I found this thread is because I use HTML textboxes to create gradient backgrounds for buttons. I wanted the overlaying button's Button.HoverFill and Button.PressedFill to be functions of the color that I was creating a gradient with and also partially transparent.

ColorValue() of a hex value can also include the alpha. Therefore if I want a 50% transparent overlay of the bottom color of the gradient bottom property in my component (structured as hex), I can use


which works because I structured GradientBottomColor as a hex value stored as a text string.

Using this globally in your app might be more difficult, because even if you set up a color library in hex there's really no way to grab that hex value out of a color property in another object to reference. The only reason this workaround works for me is because I'm using components where I specifically set things up as hex in a string property and then I could append the alpha to that string.

TL;DR: We still need an Opacity function and this issue isn't solved.