How to make gradient text with a drop shadow

[Gary]

I’ve been playing around with trying to create gradient text. I wanted a top-to-bottom gradient with white at the top and a gold-ish color at the bottom. Elsewhere on this site I found the code that makes that work:

h2 {
background: -webkit-linear-gradient(#ffffff, #bb8426);
background: linear-gradient(#ffffff, #bb8426);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

When I embedded that code and set my text to “h2” here was the result:

Not bad, but I wanted a drop shadow. The problem is, if I try to add one, something in the code conflicts and the result is not good:

So, I duplicated the text, did NOT set it to “h2” and gave it a drop shadow. I set the text color to transparent, so I’d only have the shadow:

Then I just moved the one text on top of the other, and I ended up with a nice gradient text with a shadow:

[Allan]

Hello

The gradient and text shadow functions are already available in Sparkle without the need to add any code.

You can find the shadow option to the right of the bold/italic/underline buttons after selecting your text box.
For the gradient, you’ll need to check the “Effect” box, which is available starting from Sparkle 5 (but only if you have a relatively recent version of macOS, as far as I know).

[Gary]

Very cool, I did not know that!

[Gary]

How did you do that? When I set a shadow and a gradient it looks like this:

Worse, in live preview it looks like this:

I have Sparkle 5.5.4 and Mac OS Sonoma.

[Allan]

I also encountered this issue on my end. It seems that having both the shadow and gradient effects enabled together causes this. I will report the issue to Duncan.

In the meantime, until the issue is fixed, you can overlay two text layers: one with the shadow in the back and the other with the gradient in the front. That’s what I did for the example I showed you.

[Gary]

Ah, yeah, that’s what I did in my initial post (except that I used code to make the gradient. Thanks for pointing out that gradients are built-in. I didn’t know that).

I hope they fix this issue. Not that it’s super difficult to overlay two text layers, but it would be nice not to have to.