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