How to create a sprite outline with blurred edges and make it semi-transparent in Unity?

Hello everyone,

I’m working on a 2D project in Unity and I need to:

  1. Add an outline around a sprite.
  2. Blur the edges of the outline.
  3. Make the outline semi-transparent.

So that the final result looks like this:

I would appreciate any advice.
Thanks in advance!

The best way to do this is within your image editing program (Photoshop, Krita).

You could, however, do it in layers if that’s more modular for you. This is using two Image components (UI component) under a Canvas.

  1. Sprite background that’s a colored/white circle with an outline (from image editor). This outline is here. It can be blurred semi-transparently within the image editor. Your image.color can be set if you want to change the background color, perhaps per item.
  2. Item icon (eg your handcuffs) in foreground.

I’m just assuming this is for the UI, because it looks like it is, but if that’s wrong use a Sprite Renderer as normal.

If for some reason you really need to generate the outline within Unity, then you might want to use this simple outline shader. A modification to this video is to target the Canvas, and not as a 2D shader. Canvas Shader Graphs are available in later versions of Unity, I think 2023.2 onwards.