UI develops black outline when rendered in Roblox

[TheTypicalDoge]

I’ve been making some simple pixel art decals for a game and I’ve noticed that some of my decals have black outlines when rendered in game.
This picture shows the decals that I exported from Figma

and these pictures show what happens when I import them into Roblox and use them

It’s worth noting that BorderPixelSize is set to 0 and I’ve played around with other settings and properties and nothing seems to remove this. I’m not really sure what’s going on here but its been pretty frustrating. My question is how to remove this and prevent this from happening to other assets that I might want to add into my game. Any help is appreciated.

[wereallgoofygoobers6 (goober)]

This happens a lot with Roblox clothing too, I think it’s a problem with the site itself not the UI.

As you can see here, this template has no visible gray outlines on the template.

But when it’s uploaded, the shirt has a weird gray outline.

There’s not much you can do, maybe try your luck and message @bug-report.

[envykillie (Killie)]

Is it the shadow or just roblox issue?

[dukzae]

It’s an issue with how Roblox renders images. Luckily, there is a community resource available which solves this issue:

Pixelfix: Remove the black edges on scaled images

Pixelfix [Pixelfix-1] Pixelfix changes the color of transparent pixels to match the color of the nearest non-transparent pixel. Transparent pixels stay transparent, but when resized and blended with non-transparent pixels they won’t cause dark borders. How it works Here are screenshots of images in Roblox that have been scaled down, showing with/without Pixelfix and with/without transparency: [Pixelfix-2] Since the transparent pixels are no longer black, they no longer make edges of the im…

[Y_VRN (Y_VRNDLL)]

If the UI is only made for pixel-looking GUI’s, probably just use the ResampleMode property, set it to Pixelated. The docs for this is empty though, so here’s a link about the update:

ResampleMode - New Property for Image GUI Objects

Dear developers, We are enabling a new property called ResampleMode on ImageLabel and ImageButton. This property can be used to switch the texture filtering method for image GUI objects. The two resample modes represent the following texture filtering modes respectively: Default : Bilinear Pixelated : Nearest Neighbor The nearest neighbor filtering can result in aliasing and shimmering during size reduction, so we suggest you always use the Default ResampleMode, unless you specifically …