2D fog overlay

A shader that can create a fog overlay, perfect for 2D top-down games.


First create a ParallaxBackground node and set its layer to something higher than 1, than add a ParallaxLayer node and set mirroring to the sime size as the viewport, then add a ColorRect node and set its size to be the same as the viewport as well. Add a ShaderMaterial that uses this shader to that ColorRect to show the fog.


The same shader can also be used for any other node if you want something to look like smoke or fog.

Shader code
shader_type canvas_item;
//render_mode unshaded; // optional

// Noise texture
uniform sampler2D noise_texture: repeat_enable, filter_nearest;
// Fog density
uniform float density: hint_range(0.0, 1.0) = 0.25;
// Fog speed
uniform vec2 speed = vec2(0.02, 0.01);

// Called for every pixel the material is visible on
void fragment() {
	// Make the fog slowly move
	vec2 uv = UV + speed * TIME;
	// Sample the noise texture
	float noise = texture(noise_texture, uv).r;
	// Convert the noise from the (0.0, 1.0) range to the (-1.0, 1.0) range
	// and clamp it between 0.0 and 1.0 again
	float fog = clamp(noise * 2.0 - 1.0, 0.0, 1.0);
	// Apply the fog effect
	COLOR.a *= fog * density;
2d, Fog, overlay, Post processing, Smoke, top down
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

2D Fog Overlay

Simple noise overlay

Vortex overlay

Notify of

Newest Most Voted
Inline Feedbacks
View all comments
22 days ago

I follow the steps and only get a gray window. Not these clouds like in images. Do i need to add a noise texture?

16 days ago
Reply to  Solenya

figured it out you need to take the third picture as noise texture and play with the clamp(noise * X parameter to get different densities

16 days ago

see comment below

Last edited 16 days ago by marugun