Blur Effect gradation

Question

Hi.
I recently started shader.
I want gradetion-blur

Can it be done as shown in the figure below?

This was created with image editing software

Sorry, I'm not good at English

Comments

Your image is not visible to me. It is forbidden by Google

---

thx.
I Fixed.

---

Still get same error. Have you tested this in private window (as in not logged into Google)?

Failed to load resource: the server responded with a status of 403 ()

---

ok...
how's this?

---

Still no image. I give up.

Answer 1

Add TextureRect to your scene, set expand to to true and make your TextureRect fill whole screen. Then set texture of this rect to any image (even default icon.png will work). After it, add material to this TextureRect and add next shader:

shader_type canvas_item;

void fragment() {
    vec4 color = texture(SCREEN_TEXTURE, SCREEN_UV, SCREEN_UV.x * 3.0);
    COLOR = color;
}

Here 3.0 is the blur factor: the bigger this value is, the blurrier image will become on right side of the screen. This should give you result similar to your image.

P.S. Here's the link to the image in this post (got it from page source using inspect tool) https://drive.google.com/file/d/13pLOPcojFHA_pUkCASTRX5AUit5l2znt/preview