Linear Gradient
This shader generates a linear gradient between 2 colors. You can change the position of the colors, the size of the gradient effect, the rotation angle and, of course, the colors themselves.
To use the shader, simply create a ColorRect node, create a shader material for it and paste the shader.
Shader code
shader_type canvas_item;
uniform vec4 first_color : hint_color = vec4(1.0);
uniform vec4 second_color : hint_color = vec4(0.0, 0.0, 0.0, 1.0);
uniform float position : hint_range(-0.5, 0.5) = 0.0;
uniform float size : hint_range(0.5, 2) = 0.5;
uniform float angle : hint_range(0.0, 360.0) = 0.0;
void fragment() {
float pivot = position + 0.5;
vec2 uv = UV - pivot;
float rotated = uv.x * cos(radians(angle)) - uv.y * sin(radians(angle));
float pos = smoothstep((1.0 - size) + position, size + 0.0001 + position, rotated + pivot);
COLOR = mix(first_color, second_color, pos);
}
nice
Doesn’t work with Godot v4.4 because the syntax
hint_color
no longer existsIt is replaced with
source_color
.