Moving Rainbow Gradient

Here is a simple rainbow gradient shader to use in your projects! It moves and has a rotation based on uniform values. (The recorded gif thumbnail is bad, the actual shader is a lot smoother than that.)

Shader code
// HSV to RBG from https://www.rapidtables.com/convert/color/hsv-to-rgb.html
// Rotation matrix from https://en.wikipedia.org/wiki/Rotation_matrix

shader_type canvas_item;

const float PI = 3.1415926535;

uniform float strength: hint_range(0., 1.) = 0.5;
uniform float speed: hint_range(0., 10.) = 0.5;
uniform float angle: hint_range(0., 360.) = 0.;

void fragment() {
	float hue = UV.x * cos(radians(angle)) - UV.y * sin(radians(angle));
	hue = fract(hue + fract(TIME  * speed));
	float x = 1. - abs(mod(hue / (1./ 6.), 2.) - 1.);
	vec3 rainbow;
	if(hue < 1./6.){
		rainbow = vec3(1., x, 0.);
	} else if (hue < 1./3.) {
		rainbow = vec3(x, 1., 0);
	} else if (hue < 0.5) {
		rainbow = vec3(0, 1., x);
	} else if (hue < 2./3.) {
		rainbow = vec3(0., x, 1.);
	} else if (hue < 5./6.) {
		rainbow = vec3(x, 0., 1.);
	} else {
		rainbow = vec3(1., 0., x);
	}
	vec4 color = texture(TEXTURE, UV);
	COLOR = mix(color, vec4(rainbow, color.a), strength);
}
Tags
gradient, moving, rainbow, rotation
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 Exuin

Scrolling background

Radial Speedlines

Palette Swap (no recolor / recolor)

Related shaders

Moving Rainbow Gradient (GD 4.0)

Chat GPT – Spatial Rainbow Gradient

Moving planets in space for Skyboxes

Subscribe
Notify of
guest

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
meme man
meme man
2 years ago

kewl rainbow~~

llyrric
2 months ago

This is cool, thanks. For anyone who might be using this to represent an angle in the game, you need to swap the cos and sin functions in the shader to make the angle variable turn in the same direction as Godot built in engine. It is also off by 90 degrees.

Sas
Sas
1 month ago

Works perfectly! For anyone on Godot 4, just remove the 6th line with PI. Seems they have added PI as a constant. Thank you very much!