Pixelate Shader

Drop it into your project

1. Copy pixelate.gdshader, pixelate.gdshader.uid and pixelate_material.tres into your project, for example into res://shaders/. Keep the .uid file next to the shader. The material finds the shader by that ID, so it works in any folder you choose.
2. Open the scene that stays loaded while you play, usually your main scene. Add a CanvasLayer as a child of its root and leave Layer at 1. Add a ColorRect as a child of the CanvasLayer.
3. With the ColorRect selected, open the anchor preset menu in the 2D editor toolbar and choose Full Rect, so it covers the viewport at any window size. In the Inspector, set Mouse > Filter to Ignore. A ColorRect stops mouse clicks by default, and a full-screen one would block every button under it.
4. Drag pixelate_material.tres into the ColorRect's CanvasItem > Material slot. The ColorRect's own colour does not matter: the shader replaces it with the screen.
5. Move any UI that should stay sharp to a CanvasLayer with Layer 2 or higher. Everything drawn before the ColorRect is pixelated: the 3D scene, the default 2D canvas, lower layers, and nodes above the ColorRect in its own layer.
6. Tune the look under the material's Shader Parameters. To change it while the game runs, call set_shader_parameter() on the ColorRect's material with the parameter name and the new value, the way demo.gd does.

Parameters

How it works

uniform sampler2D screen_texture : hint_screen_texture, filter_nearest, repeat_disable;

vec2 block = floor(FRAGCOORD.xy / size);
vec2 centre_pixel = floor((block + 0.5) * size);
vec2 uv = (centre_pixel + 0.5) * SCREEN_PIXEL_SIZE;
vec3 rgb = textureLod(screen_texture, uv, 0.0).rgb;

float steps = float(max(palette_steps, 2) - 1);
rgb = clamp(floor(rgb * steps + threshold) / steps, 0.0, 1.0);

ivec2 cell = ivec2(mod(block, 4.0));
threshold = (BAYER[cell.y * 4 + cell.x] + 0.5) / 16.0;

extends ColorRect

@export_range(1, 32) var base_pixel_size := 4


func _ready() -> void:
	get_viewport().size_changed.connect(_fit)
	_fit()


func _fit() -> void:
	var factor := get_viewport().get_stretch_transform().get_scale().x
	material.set_shader_parameter("pixel_size", maxi(1, roundi(base_pixel_size * factor)))

// Pixelate
// Screen-space pixelation with optional colour steps and ordered dithering.
// Godot 4.7 · CC0 1.0 · godotlearning.com/shaders/pixelate
shader_type canvas_item;
// No 2D lights on the effect itself: it shows the screen exactly as it was drawn.
render_mode unshaded;

// Everything drawn on screen before this node. filter_nearest makes each block
// copy one screen pixel exactly. repeat_disable clamps samples past the right or
// bottom edge to the last pixel instead of wrapping round to the other side.
uniform sampler2D screen_texture : hint_screen_texture, filter_nearest, repeat_disable;

// Width and height of one block, in pixels of the viewport this node draws into.
// 1 leaves the image as it is.
uniform int pixel_size : hint_range(1, 32) = 4;
// Levels per colour channel. 0 keeps every colour. 2 to 16 limits red, green and
// blue to that many levels each (4 gives 4 x 4 x 4 = 64 colours). 1 counts as 2.
uniform int palette_steps : hint_range(0, 16) = 0;
// Ordered (Bayer 4x4) dithering before the levels are applied, so gradients turn
// into a fixed pattern of blocks instead of hard bands. No effect while
// palette_steps is 0.
uniform bool dither = false;

// The 4x4 Bayer matrix: every value from 0 to 15 once, spread so that each
// threshold sits as far as possible from the ones close to it.
const float BAYER[16] = float[16](
	0.0, 8.0, 2.0, 10.0,
	12.0, 4.0, 14.0, 6.0,
	3.0, 11.0, 1.0, 9.0,
	15.0, 7.0, 13.0, 5.0
);

void fragment() {
	float size = float(pixel_size);
	// The block this pixel belongs to, counted from the top-left of the viewport.
	vec2 block = floor(FRAGCOORD.xy / size);
	// Every pixel of the block reads the same screen pixel: the one at the block's
	// centre. Sampling the middle of that pixel, not the line between two pixels
	// (where an even block size puts its centre), gives the same answer on every GPU.
	vec2 centre_pixel = floor((block + 0.5) * size);
	vec2 uv = (centre_pixel + 0.5) * SCREEN_PIXEL_SIZE;
	vec3 rgb = textureLod(screen_texture, uv, 0.0).rgb;

	if (palette_steps > 0) {
		float steps = float(max(palette_steps, 2) - 1);
		// Without dithering every value rounds to the nearest level (threshold 0.5).
		// With it, each block in a 4x4 group rounds at its own threshold.
		float threshold = 0.5;
		if (dither) {
			ivec2 cell = ivec2(mod(block, 4.0));
			threshold = (BAYER[cell.y * 4 + cell.x] + 0.5) / 16.0;
		}
		rgb = clamp(floor(rgb * steps + threshold) / steps, 0.0, 1.0);
	}
	COLOR = vec4(rgb, 1.0);
}

Pitfalls and renderer notes

• Your HUD and menus are pixelated too. The ColorRect pixelates everything drawn before it, and that includes UI on the default canvas or on the same CanvasLayer. Put the UI on a CanvasLayer with a higher layer number than the effect, the way the demo's caption sits on layer 2 above the effect on layer 1, or move the effect to a lower layer.
• Order decides what is pixelated. hint_screen_texture holds what was drawn before the node: the 3D scene, the default canvas, lower layers and earlier nodes in the same layer. A node after the ColorRect in the same layer draws on top, sharp. Godot 4.7 takes a fresh copy of the screen for each higher CanvasLayer, but not for a second screen-reading node in the same layer. In a test, a second effect in the same layer read the picture from before the first one and undid it. Put stacked effects, such as this and a vignette, on separate CanvasLayers, or add a BackBufferCopy node with Copy Mode set to Viewport between them.
• Buttons stop responding after you add the effect. A ColorRect's Mouse > Filter is Stop by default, so a full-screen one takes every click before the UI under it sees it. Set it to Ignore, as the demo does.
• The blocks look smaller on a bigger window. pixel_size counts pixels of the viewport, and with the default stretch mode (disabled) or canvas_items, the viewport is the window. In a test with canvas_items at 2560 by 1440, the game was drawn twice as big but the blocks stayed 8 pixels wide, so they looked half as chunky. With the viewport stretch mode the viewport stays at the base size and the blocks scale with everything else. For canvas_items, use the script in "Keeping blocks the same size" above.
• Thin lines and small details flicker or vanish. Each block keeps only the colour at its centre, so a detail thinner than a block shows only in the frames where it covers a centre. The demo's 4 pixel ground edge disappears at pixel_size 8. Draw details at least pixel_size wide, or use the low-resolution viewport.
• The dither pattern does not move with the camera. The block grid and the Bayer pattern are fixed to the screen, so when the camera pans, the picture slides under a pattern that stays still. A smaller pixel_size or more palette_steps makes it less visible.
• Flat areas turn into a checkerboard with dithering on. A flat colour that sits between two levels is dithered like a gradient. Use colours on the levels for areas that should stay flat: with palette_steps 5 that is 0, 0.25, 0.5, 0.75 or 1 per channel, which is what the demo's ground stripes use.
• Screenshots differ slightly between renderers with dithering on. Under Compatibility, a block whose colour is very close to a dither threshold can round one level differently from Forward+ and Mobile. The renderer notes below have the numbers. Pixelation and colour steps without dithering came out identical on all three.
• Cost. The shader does one texture read and a few sums per screen pixel whatever pixel_size is: 921,600 reads at 1280 by 720 and 2,073,600 at 1920 by 1080, plus one full-screen copy of the screen. A bigger pixel_size does not make it cheaper, and the game behind it still renders at full size. If you need the speed, the low-resolution viewport at stretch_shrink 4 renders 16 times fewer pixels.

The demo scene was run under Forward+, Mobile and Compatibility with no errors or warnings. In a separate test that checked every third pixel of the output against a CPU reference, Forward+ and Mobile matched exactly for every setting tried. Compatibility matched exactly for pixelation and for colour steps without dithering. With dithering on, up to 2.3% of the checked pixels came out exactly one level apart, all in blocks whose colour is very close to a dither threshold. You only see it if you compare screenshots. The demo's 3D sky is a little darker under Compatibility; that comes from its 3D lighting, not from this shader. Compatibility is the renderer web exports use.

Pairs with

Shader

Sprite Outline Shader

A crisp pixel outline for any 2D sprite, drawn outside or inside the art, that stays clean on sprite sheets and atlases.

• Godot 4.7
• CC0

See the shader

More free shaders

Questions

How do I pixelate the whole screen in Godot 4?

Add a CanvasLayer to your main scene and give it a ColorRect with the Full Rect anchor preset and Mouse > Filter set to Ignore. Give the ColorRect a ShaderMaterial with this shader. It reads the screen through a sampler2D with hint_screen_texture and draws it again in blocks of pixel_size. Put your UI on a higher CanvasLayer so it stays sharp.

Does a pixelate shader work with 3D in Godot?

Yes. The 3D scene is drawn before the 2D canvas layers, so the ColorRect's screen texture already holds the 3D picture. In the demo, the sky and the spinning ring are 3D and the balls and stripes are 2D, and one ColorRect pixelates all of them. To keep some 2D sharp, put it on a CanvasLayer above the effect.

What happened to SCREEN_TEXTURE in Godot 4?

It was removed. Declare uniform sampler2D screen_texture : hint_screen_texture, filter_nearest; and read it with textureLod(screen_texture, SCREEN_UV, 0.0). Godot fills the uniform with a copy of what was drawn before the node, which is what SCREEN_TEXTURE gave you in Godot 3.

Should I use a pixelate shader or a low-resolution viewport for pixel art?

Use the shader to give an existing game the look, for a transition, or for an option the player can switch, since it works over 2D and 3D and changes nothing else. Use a low-resolution viewport, through a SubViewportContainer with stretch_shrink or the viewport stretch mode, when the game is pixel art from the start. It renders far fewer pixels and every pixel is a real game pixel, but positions inside it are in low-resolution pixels.