How to create a continuous gradient tween

I’m wanting to create a rainbow effect that continously tweens across smoothly

image

I was gonna just tween the offset to 1, then reset back to 0, but that just turns it fully red, then reset it back.
image
I’m wanting where as it tweens over, the colors continously move over to the other side, so when say the blue goes off at the bottom right, it should re-appear in the top right

while true do
	TweenService:Create(self.Instance, TweenInfo.new(), { Offset = Vector2.new(1, 0) }):Play()
	task.wait(1)
	self.Instance.Offset = Vector2.new(0, 0)
end

I’ve tried looking the Rainbow effect here but that only has a single rainbow color present at one time. I want all colors of the rainbow visible on the button the whole time

1 Like

Where do you want to use this, a GUI, a Button in the workspace, a text block, a beam? More details about what you are trying to do would help us understand.

If this is something like a Beam in the workspace then you’d just need to get a rainbow pattern with perfectly matching edges so it would appear to be continuous.

I’ve only dealt with simple GUIs, but I think I remember a post about needing an image that repeats twice and then two of that image would slide right to left (or left to right) with only the center framed area showing.
The image would need to be perfectly seamless when it joins at the right and left edges so when it slides past the viewed frame it would be able to repeat itself.
When the first image slides off the displayed area it gets placed on the opposite side and the process keeps repeating.

Just a note, for the pattern to repeat in the first image you’d have to have the full red starting at the top left corner, as well as at the top right corner so the pattern would repeat itself.
If you want it to repeat from top left down to bottom right then your image would need to be about 1.5 times wider than the frame.

1 Like

I’m doing this in UI and using UIGradient’s

Luckily for you, I had the same problem once: