Sprite Outline
In this “Unity Sprite Outline” tutorial we’ll discover how to create both a “Sprite Innerline” and a “Outer Sprite Outline”.
Simply, the Inner Sprite Outline shader is drawn “inside” the sprite, while “Outer” is the opposite
Read more about “Texture’s Texel Size” here.
HLSL
Inner Sprite Outline HLSL
Shader "Unlit/InnerSpriteOutline HLSL"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_OutlineColor("Outline Color", Color) = (1,1,1,1)
}
SubShader
{
Tags
{
"RenderType" = "Transparent"
}
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
float4 _MainTex_TexelSize;
fixed4 _OutlineColor;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
fixed leftPixel = tex2D(_MainTex, i.uv + float2(-_MainTex_TexelSize.x, 0)).a;
fixed upPixel = tex2D(_MainTex, i.uv + float2(0, _MainTex_TexelSize.y)).a;
fixed rightPixel = tex2D(_MainTex, i.uv + float2(_MainTex_TexelSize.x, 0)).a;
fixed bottomPixel = tex2D(_MainTex, i.uv + float2(0, -_MainTex_TexelSize.y)).a;
fixed outline = (1 - leftPixel * upPixel * rightPixel * bottomPixel) * col.a;
return lerp(col, _OutlineColor, outline);
}
ENDCG
}
}
}
Outer Sprite Outline HLSL
To have achieve an “Outline” instead of an “Innerline”, just change the “outline” line (in the previous code snippet) into this:
fixed outline = max(max(leftPixel, upPixel), max(rightPixel, bottomPixel)) - col.a;
Amplify Shader
Inner Sprite Outline ASE

Outer Sprite Outline ASE

Thanks for reading! ❤️
Let us know what you think! We're a small team and we are loving what we do, so any feedback is appreciated ❤️ You can also consider joining the newsletter (either weekly or monthly, we care deeply about it) and never miss our new posts. Cheers!
✦ Join the newsletterMore Posts
How to make a Triplanar Shader in Godot
We made a simple terrain shader for Godot, which lets you apply different textures on based slopes and more. Have fun!
Text Animator for Godot is Out in Early Access!
Text Animator for Godot is out now in Early Access! Start bringing your texts to life in a few clicks and help us shape the future of this tool in Godot! Cheers!
Text Animator is coming to Godot, Unity and Unreal.. with a fresh new look!
Text Animator is coming to Godot, Unreal and Unity UI Toolkit with a fresh new look! Read more.
I'll be doing a workshop at DevGAMM Lisbon this year!
I'll be doing a workshop at DevGAMM Lisbon this year! Designing tools from start to finish and prototyping with Godot, docs and much more. Looking forward to it!
Creating custom inspectors in Godot C# more easily
Creating custom inspectors in Godot can become a bit tedious in C#, so we have built a custom and free addon that handles this for you!
LinkedIn will use your data to train their AI
Starting November 3rd, 2025, LinkedIn will start using your data to train their AI. Ughh.
Comments