Apply gradient to text
Would be really nice if you could add gradient to text as well as objects.
A work around for this is to put a gradient on a shape and set it to the size of the text then position it above the text set the text colour to white on a dark background or black on a light background then set the blend mode to darken or lighten on the shape and the gradient should apply like a clipping mask on Photoshop
the text dose look sharp however if you need a work around its there
If I use the pathfinder to do a gradient from left to right, XD makes me a gradient from bottom to top. This is a bug, but Adobe do not allow to add bugs any more …
I think it is really impractical converting text to an object before applying gradient. Collaborating tools for designers and developers such as Zeplin generate css code for every asset which makes developers job much faster.
When I send them a design where every gradient text is an object they can't use that generated code, they have to write one on their own because they can't leave it as an object (client has to have the ability of editing that text).
It's really irritating that you have to convert text to paths every time you want to apply gradients to text. This kind of text visualisation is actually used very often in web, so pleeaaase add this feature!!
Ahmad Luthfi Masruri commented
It would be very good if you could add a gradient to text and border as well, I think it's a common feature in design app
Bhavya Verma commented
I am unable to fill my text to gradient unless i made my text to shape & that loss my text properties
Simon Ferndriger commented
Totally agree! If you need to convert text to an object first, you cannot edit the text later on... so if you use a gradient for titles or buttons, etc. this feature would be awesome!
Derek Heisler commented
Please please add this, seems like a day one need.
@hannahmilan when convert text to path always do keep a copy of the text in the layer panel, untill Xd won't support gradient to text feature, we have this only hack!
You can do one thing, add same size object with gradient and do mask with text layer.
Peter Cui commented
webkit is able to:
background: -webkit-linear-gradient(left, #fbd1b4 0%, #e7986f 50%, #e7986f 100%, #c17c64 100%);
So is very logical to add gradient color fill for text.
@Hannah, likely no work around. Once you convert to a path, you'd have to recreate the text again if you wanted to edit it.
no workaround till now i guess...
I agree with @Hannah, at least in PS we are able to use Gradient Overlay feature without converting the text to a path.
Hannah Milan commented
@Corey, what if you want to edit the text again but you already converted to path? Is there a way or workaround on that one?
AdminCorey Lucier (Adobe) (Admin, Adobe) commented
Thanks for the feedback! For now you could convert the text to a path, then fill with a gradient?