Simple blur, mixed with a color
This shader let’s you:
- blur what’s behind it
- define a colour the shader should mix with
- control the strength of the mix
Apply the shader onto a ColorRect which you’ve placed over elements which you want blurred.
Each of the attached screenshots showcases my usage of the shader. I’ve been using it for so long in so many projects, though it’d be a pity not to share although very simple it might be of service to someone.
Pro tip: This shader is fantastic for adding that extra little bit of Oomph! to your UI. Sprucing it up and making it look ever so slightly modern. Use with moderation and elegance.
Shader code
shader_type canvas_item;
uniform float blur_amount : hint_range(-2.0, 10.0);
uniform float mix_amount : hint_range(0.0, 1.0);
uniform vec4 color_over : hint_color;
void fragment() {
vec4 blurred = textureLod(SCREEN_TEXTURE, SCREEN_UV, blur_amount);
vec4 fin = mix(blurred, color_over, mix_amount);
COLOR = fin;
}
As of Godot 4.1, there seems to be an issue (I don’t know if it is a bug or the result of some intenteded feature) with the screen texture.
First, you have to define it at the top of your shader, alongside the other uniforms:
Then, you have to set the alpha of the blurred vec4 to be 255.0. For whatever reason, by default the alpha will be 0.0, and that can cause issues when trying to blur screen elements that are white or that have a very light color.
So, the final complete shader should be like this, it seems:
shader_type canvas_item; uniform float blur_amount : hint_range(-2.0, 10.0); uniform float mix_amount : hint_range(0.0, 1.0); uniform vec4 color_over : source_color; uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap; void fragment() { vec4 blurred = textureLod(SCREEN_TEXTURE, SCREEN_UV, blur_amount); blurred.a = 255.0; vec4 fin = mix(blurred, color_over, mix_amount); COLOR = fin; }