2D Drop Shadow

Duplicates everything rendered in a solid color by an offset, behind the actual render. (Including Sprites, Particles, etc…).

Create a ColorRect and apply the shader to it, It needs to be rendered after everything you want to have a shadow for, otherwise everything rendered after the ColorRect won’t have a shadow. (Put it at the bottom of nodes).

You need to set the window mode to “Viewport”, Change the shadow offset to your liking.

Define the background color you need the shader to display on, then change the shadow color.

To use in Godot 3 change source_color to hint_color

Shader code

shader_type canvas_item;

uniform vec4 background_color : source_color;
uniform vec4 shadow_color : source_color;
// Currently pixels always in application size, so zooming in further wouldn't increase the size of the dropdown
// but changing that would also be relatively trivial
uniform vec2 offset_in_pixels;

void fragment() {
	
	// Read screen texture
	vec4 current_color = textureLod(SCREEN_TEXTURE, SCREEN_UV, 0.0);
	
	// Check if the current color is our background color
	if (length(current_color - background_color) < 0.01) {
		
		vec4 offset_color = textureLod(SCREEN_TEXTURE, SCREEN_UV - offset_in_pixels * SCREEN_PIXEL_SIZE, 0.0);
		
		// Check if at our offset position we have a color which is not the background (meaning here we need a shadow actually)
		if (length(offset_color - background_color) > 0.01) {
			// If so set it to our shadow color
			current_color = shadow_color;
		}
	}
	
	COLOR = current_color;
}

Tags