Stepped Gradient

Stepped Gradient is a Retro-styled Shader for Gradients. use/change some params in the shader parameters or in the code itself

first_color and second_color is obviously. the colors itself.

position is where the gradient should start (like an position offset!)

stepIntensify is how many steps for the gradient color to be given to.

 

inspired by: https://godotshaders.com/shader/linear-gradient/

Shader code
shader_type canvas_item;

uniform vec4 first_color = vec4(1.0);
uniform vec4 second_color = vec4(0, 0, 0, 1.0);
uniform float position : hint_range(-2, 2) = 0.5;
uniform int stepIntensify : hint_range(1, 50) = 10;

void fragment() {
	float pos = round(smoothstep(0,1,(position + UV.y) / 2.0) * float(stepIntensify));
	COLOR = mix(first_color,second_color,pos/float(stepIntensify)); 
}
Tags
gradient, retro, rough, stepped
The shader code and all code snippets in this post are under GNU GPL v.3 license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from imakeshaders

Retro Screen Lines

Vignette

Related shaders

2d sprite based vfx gradient shader

Simple Gradient Mapping

Ripple Gradient Shader

Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments