Adding gradient/effect to tag on TextChatService

Help and Feedback Scripting Support
#1

Trying to figure out the work around to add a gradient or some type of effect for the tags.

I’m only able to change the color and that’s it…


TextChatService.OnIncomingMessage = function(message: TextChatMessage)
	local prop = CWC:DeriveNewMessageProperties()
	local textSource = message.TextSource
	if textSource then
		local player = Players:GetPlayerByUserId(textSource.UserId)
		if player then
			if player:GetAttribute("Owner") == true then
				local overrideProperties = Instance.new("TextChatMessageProperties")
				overrideProperties.PrefixText = "[Owner] " .. message.PrefixText
				return overrideProperties
			elseif player:GetAttribute("IsVIP") == true then
				local overrideProperties = Instance.new("TextChatMessageProperties")
				overrideProperties.PrefixText = '<font color="#FF0000">[VIP]</font> ' .. message.PrefixText
				return overrideProperties
			elseif player:GetAttribute("IsMember") == true then
				local overrideProperties = Instance.new("TextChatMessageProperties")
				overrideProperties.PrefixText = "[Member] " .. message.PrefixText
				return overrideProperties
			end
		end
	end

	return nil
end
#2

Right now TextChatMessageProperties.PrefixText only supports basic rich text like <font> tags and simple styling. It doesn’t support gradients or outlines since Roblox doesn’t expose full UI or HTML/CSS-like rendering.

If you want gradients or animated tags you’ll need to build a custom chat UI using TextLabel instances and UIGradient, and hook into TextChatService.OnIncomingMessage to display messages yourself. But also means fully replacing the default chat.

The rich text documentation outlines the limitations.

2 Likes
#3

Roblox’s RichText engine does not natively support gradient text, its <font> tag only allows solid colors and basic styling, so attempting to apply a color gradient via RichText alone will not work.

Instead, you can leverage the OnChatWindowAdded API to attach a UIGradient directly to your tagss text label in the chat window via ChatWindowMessageProperties
TextChatService - Channel Tabs UI Gradient

For bubble chat, you can parent a UIGradient under TextChatService.BubbleChatConfiguration (or per‐message via BubbleChatMessageProperties) to style bubble backgrounds and with a white text color and transparent background have the gradient show through the glyphs
TextChatService - New BubbleChat Customization 1
New BubbleChat Customization 2

Or you could manually “fake” a gradient by splitting your tag string into individual characters wrapped in sequential <font color="#..."> tags to simulate a color transition
New BubbleChat Customization