How do I apply a gradient to part of a text?

Help and Feedback Art Design Support
#22

I went through this but like I mentioned before I wasn’t able to get the result I want with just RichText
Seems like I’ll have to use 2 Instances to make this work

#23

gradient html and colour html use both

#24

Oh what there was a gradient HTML all along?!
Well you should’ve just said that in the first place :smile:
Could you guide me through this gradient HTML that you’re talking about, since I can’t find it in the documents :slightly_smiling_face:

#25

html gradient are hard to find Here’s a code I made:

local newGradient = Instance.new("UIGradient",workspace)

 local colorTable = {}

 for i = 0,359,20 do

 table.insert(colorTable,ColorSequenceKeypoint.new(i/359,Color3.fromHSV(i/359,1,1)))

end

* table.insert(colorTable,ColorSequenceKeypoint.new(1,Color3.fromHSV(1,1,1)))

* newGradient.Color = ColorSequence.new(colorTable)
#26

Oh but that still utilizes the UIGradient Instance
I was thinking something like the imaginary example below existed when you mentioned Gradient HTML

notification.Text = text1..[[<font gradient=(0 = (255,255,255), 1 = (0,0,0))>]]..text2..[[</font>]]
-- 0 is the keypoint position, 255,255,255 is rgb color. Same goes for 1 = (0,0,0)
#27

why use 255, 255, 255?, that…

#28

That’s just an example so that it’s easy to understand.

#29

image
image1481×802 68.5 KB 

<font face="GothamBold"><font color="#ff3300">e</font> <font color="#ff9900">e</font> <font color="#ffff00">e</font> <font color="#33cc33">e</font> <font color="#3399ff">e</font></font>
#30

Good thinking but as you can see the gradient isn’t perfect.
What if I want it to be a smoother gradient which starts from the first e and ends at the 3rd e and a second gradient that starts from the 3rd e and ends at the last e?

#31

Then change the color html’s in the text.

#32

That won’t work all the time
If I change it to, e.g. red, then the existing UIGradient will basically just have a red filter
Seems like I’ll have to post my solution soon since it seems like applying a gradient to part of a text with only 1 TextLabel seems impossible

#33

Alr since it’s almost been 24 hours since this post was made and I didn’t get a satisfying answer, here is how I did it with 2 TextLabels since I couldn’t figure out how to do it with 1:

I added 2 TextLabels with RichText enabled and added one under the other. Then in the last TextLabel I added a UIGradient, like this:
image
(idk why I named them like that idk what else to name them)

Then I made a function that goes something like this:

local function placeholder(text1, text2)
	-- clone the stuff and set other properties and more nonesense

	TestClone.Text = text1..[[<font transparency="1">]]..text2..[[</font>]]
	TestClone.GradientText.Text = [[<font transparency="1">]]..text1..[[</font>]]..text2

	-- set parent to where you want and other code
end

And then I call it using text1 and text2
text1 is the one that you don’t want to have the gradient
text2 is the one you want the gradient

And this is how it turned out for me
image

Note: TextStrokeTransparency was set to 1 for one of the TextLabels since imo it looks better

#34

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.