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.

More from HexagonNico

Fire dissolve shader

Related shaders

2D Fog Overlay

Voronoi Effect Overlay

Vortex overlay

Notify of

Newest Most Voted
Inline Feedbacks
View all comments
5 months 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?

5 months 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

5 months ago

see comment below

Last edited 5 months ago by marugun