Simple blur, mixed with a color

lentsius

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;
}
Tags
blur
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

Canvas item756

Simple Blur

Canvas item18

Simple color invert area.

Canvas item25

color splash (show only one color)

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
profpatonildo
profpatonildo
1 year ago

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:

uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;

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.

vec4 blurred = textureLod(SCREEN_TEXTURE, SCREEN_UV, blur_amount);
blurred.a = 255.0;

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;
}
5
Reply
danny
danny
7 months ago
Reply to  profpatonildo

in shaders, color vectors cannot have a value above 1, so setting blurred.a to 255 will definitely break everything, but you don’t need to use the blurred alpha, i think it’s better to have an alpha parameter

1
Reply