Fix: Unity Canvas Scaler UI Blurry on Different Resolutions

Your UI looks pixel-perfect in the Game view at 1920×1080. You ship the build, a player on a 1366×768 laptop screenshots it, and the text looks like a JPEG from 2003. Another player on a 4K display sends a screenshot where the buttons are tiny squares of mush. The bug is not in your art — it is in how Unity’s Canvas Scaler converts reference units to physical pixels, and how aggressive the sprite importer is by default.

Three Layers of Blur

Blurry Unity UI usually comes from one (or more) of three independent issues. You have to fix them in the right order or you will chase your tail.

Layer 1: The Canvas Scaler is in the wrong mode. A fresh Canvas component defaults to Constant Pixel Size, which means 100 reference pixels are 100 screen pixels regardless of the player’s monitor. On a 4K monitor, your 200×50 button is a tiny dot.

Layer 2: The reference resolution is wrong, or the match value is. Even with Scale With Screen Size, the Canvas Scaler needs a reference resolution to anchor everything to. Pick the wrong one and the upscaling factor is non-integer, which produces blurry edges.

Layer 3: The sprite was imported with low quality or filtered with point sampling. Unity will happily compress your 1024×1024 button down to 256×256, lose half the detail, and then upscale it on a 4K display. The Canvas Scaler can’t recover what the importer threw away.

Step 1: Configure the Canvas Scaler

Select your Canvas in the Hierarchy and look at the Canvas Scaler component. Change the settings to:

• UI Scale Mode: Scale With Screen Size
• Reference Resolution: 1920 × 1080 (or whatever your design target is)
• Screen Match Mode: Match Width Or Height
• Match: 0.5 (balanced) for desktop, 0 for ultrawide-friendly horizontal HUDs, 1 for portrait mobile
• Reference Pixels Per Unit: 100 (must match your sprite import PPU)

The Match value is the most often misunderstood. It is a slider between “match width” (0) and “match height” (1). At 0.5 Unity uses the geometric mean, which means the UI gets bigger on wider screens but never overflows the safe area. At 0, the UI scales by width only, which keeps horizontal HUD elements aligned but lets the top and bottom drift. Pick the value that matches the dimension your layout cares about.

Step 2: Fix Sprite Import Settings

Select each UI sprite in the Project window. In the Inspector:

// Recommended UI sprite import settings
Texture Type:        Sprite (2D and UI)
Sprite Mode:         Single (or Multiple for atlases)
Pixels Per Unit:     100  // must match Canvas Scaler PPU
Mesh Type:           Tight
Filter Mode:         Bilinear  // NOT Point
Wrap Mode:           Clamp
Max Size:            2048  // or 4096 for full-screen art
Compression:         None  // for HUD; Normal Quality for backgrounds
Generate Mip Maps:   false  // UI is always drawn at 1:1, mips waste memory

The single biggest mistake is leaving Compression at the default Normal Quality. For UI elements, especially text panels and icons, compression artifacts are visible at any zoom level. Set HUD sprites to None and only compress backgrounds and decorative elements.

If your UI is pixel art, you do want Filter Mode: Point and integer scaling, but that is a different conversation. For modern hi-res UI, always use Bilinear.

Step 3: Use the Right Reference PPU

Unity has two pixel-per-unit values that must agree. The first is on each sprite (Pixels Per Unit in the import settings). The second is on the Canvas Scaler (Reference Pixels Per Unit). When they match, sprites render at their native size in the canvas. When they do not, Unity stretches or shrinks the sprite by their ratio, and that stretching is where blur is born.

Pick a project-wide PPU (100 is the most common) and stick to it. Audit your existing sprites with this script:

// Editor utility: report all UI sprites with non-default PPU
using UnityEngine;
using UnityEditor;

public class PpuAudit
{
    [MenuItem("Tools/Audit Sprite PPU")]
    static void Run()
    {
        var guids = AssetDatabase.FindAssets("t:Sprite");
        foreach (var g in guids)
        {
            var path = AssetDatabase.GUIDToAssetPath(g);
            var imp = AssetImporter.GetAtPath(path) as TextureImporter;
            if (imp != null && imp.spritePixelsPerUnit != 100f)
                Debug.LogWarning($"Non-default PPU: {path} = {imp.spritePixelsPerUnit}");
        }
    }
}

Verifying the Fix

Build the player and test at three resolutions: 1366×768 (low-end laptop), 1920×1080 (your design target), and 3840×2160 (4K). The UI should look identically crisp at all three. If a single resolution still looks blurry, the Canvas Scaler match value is probably wrong for that aspect ratio — experiment with 0, 0.5, and 1 and pick the one that produces sharp edges across the range you care about.

For TextMeshPro text specifically, blur usually means the font asset was generated at too low a sample size. Open the font asset, click Generation Settings, set Atlas Resolution to 4096×4096, set Sample Point Size to Auto Sizing, and click Update Atlas Texture. Your text will be sharp on every monitor.

“The Canvas Scaler is doing exactly what you told it to. The bug is almost always that you did not tell it the right thing — pick a reference resolution, lock everyone on the team to it, and never use Constant Pixel Size unless you are building a tool window.”

Related Issues

If your TextMeshPro text is missing entirely instead of blurry, see Unity TextMeshPro text not showing. For UI buttons that look fine but do not respond to clicks, see Unity UI button not responding to clicks. For build-time blurry sprites, check Unity SpriteAtlas wrong sprite loading.

Always test the build, not the editor. The Game view in the editor lies about UI scale — only the player executable shows you what your players actually see.