Double sided transparent gradient

Fades an element from transparent (outside) to fully visible (inside) with some config options.

Couldn’t find a working version before. I used it on a subviewportcontainer.
Default values are what I used to blur the subviewportainer in the screenshot, the size of the container is 128×40, for other sizes you have to edit the values

I chatgpt’d it, so don’t credit me

Shader code

shader_type canvas_item;

uniform float divide = 0.065;      
uniform float blur = 0.385;        
uniform float fade_width = 0.995;  

void fragment() {
    float left_fade_edge = fade_width;
    float right_fade_edge = 1.0 - fade_width;

    float leftFade = 1.0;
    float rightFade = 1.0;

    // Normalize to 0..1 within the fade width region
    if (UV.x < left_fade_edge) {
        float px = UV.x / fade_width;
        leftFade = smoothstep(divide, divide + blur, px);
    }

    if (UV.x > right_fade_edge) {
        float px = (1.0 - UV.x) / fade_width; // mirrored
        rightFade = smoothstep(divide, divide + blur, px);
    }

    COLOR.w *= min(leftFade, rightFade);
}

Tags