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); 
}
Tags
gradient
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.

More from Overloaded

Color curves

Color curves (Godot 3.x – GLES2)

Related shaders

Linear Rainbow

Adjustable Strength (Sharp) Linear Interpolation

Parametric Linear RGB Dimmer

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
imakeshaders
4 months ago

nice

TheYellowArchitect
2 months ago

Doesn’t work with Godot v4.4 because the syntax hint_color no longer exists
It is replaced with source_color.

Last edited 2 months ago by TheYellowArchitect