Shadow and text outline, but on clipped background to text?

Hey folks! New to webflow, so forgive the simplicity of the question.

As above, I’m attempting to add text-shadow and outline to a clipped background text? For some reason, the shadow replaces the clipped background image on the text. The background image that was clipped goes into the shadow?

Simple I’m sure. Not for a newbie! :slight_smile:


Thanks in advance for any help. Hope everyone is doing great! :smile:

HI @Gareth_Ellison, instead of text shadow you have to use filter drop-shadow but because WF filters doesn’t offer full CSS filter options you have to use custom code and here is an example.

.heading {
filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.8));
}

Hi Stan. Hope you’re doing great. Thanks so much for taking the time to reply. I am just only learning code now. But will take note of the example and see what I can come up with. I thought it would simply have been a case of adding the shadow like you would to normal text.

In the meantime, I can play around with background variations to enhance the visibility of the clipped text.

Thanks again for all your help. :smiley:

Gareth.

hi @Gareth_Ellison yes you can.

feel free to close this request as solved by checking any response as solution.

Happy no-coding

Hi Stan. Thanks for your help.

I’ll coding soon enough I’m sure. Everyone starts somewhere. In the meantime, loving the opportunities for design given by WF. :slight_smile:

Thanks again.

1 Like

Hi Stan,

I’m using your suggestion to add a text shadow to text that has a clipped background. Would you add this code to the body of your page?

Thanks for your help!

hi @StephGreen what do you mean by add to body element?

I mean would I put the code in the page settings under “Before tag” block? Or would you put this code in an embed element in the div with the text?

(Sorry, I’m not very familiar with using code, and I’ve had different instructions for things in Webflow use both solutions)

hi @StephGreen instead writing a long text to explain these thing to be clear enough I have recorded video that may help you to understand. Feel free to download this video as i will delete it later when cleaning Cloud storage space

https://cln.sh/I5IC60

This is so helpful! Thank you so much for taking the time to provide such a helpful response!

1 Like