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

Simple Blur

color splash (show only one color)

Simple color invert area.


Inline Feedbacks
View all comments