Widget opacity/border issues


I try to make a health bar widget with progression bar where fill color is red, background color is grey with 0.25 opacity.
Now opacity on default does not really work, above 0.5 its visible and under it its just invisible, no true transparency/opacity.

Now you can make it work by changing the blend mode in blueprint to transparent but than the border becomes blurry. The progress bar border settings does not do much.

How to make the progress bar properly transparent with sharp edges? Should i just use an UI material instead of progress bar?

not entirely sure if that’s what you want but you can try this:

Select your progress bar within your Widget blueprint, find Style section

  • background image - set it to image provided, resize your bar to match the image size (300x40) and set margin to 0

  • fill-image - exactly as above just use fill-image, make sure you set margin to 0
    Scroll down a bit to Appearance section and change the color to white

Now your bar will fill with the image based on the percentage. Please let me know if this was helpful in any way.

End Result:

Images to use:

Hello, thanks for the reply but i already filled them in with some images like you suggested with 0 margin but the edges are still blurry after i set the widget to transparent over masked.
That is what i don’t understand why are the edges blurry on transparent?

I’m not entirely sure why this is happening, sorry. Have you tried using images I provided? Maybe it has something to do with the images you are using.
I’m no expert but it looks like there are two colors overlapping one another and creating this strange look. Try playing around with Fill Color and Opacity. I tried to find a solid solutions for this but I found nothing so far.

Yeah i tried your solution just to be sure with your image but the progress bar’s border is still blurry, i tried to use dynamic material as an image and use that as health bar too but same border blurriness. To be fair its not that noticeable since its just like few pixel wide but still annoying, it might have to do with how i place my widget.

I really don’t know. I tried to replicate this blur effect in my project but all my bars look smooth. Sowwy.

Ok i actually found the problem and the solution to it. I post it so it might help other people.

In the blueprint where i use my widget component the draw size was too big and for some reason it blurred the widget and not shown it properly (tho i have no idea why only the transparent widget version, the masked one was just fine).

You should either change draw size to somewhat fit the widget or turn on Draw at Desired Size and it will be sharp as a knife.

Happy to hear you got it solved.
Thank you for sharing!