This is my first post on here so I hope someone can help me out (and that this makes some sense). I’ve looked this issue up and found that you used to be able to apply a white stroke around text (with transparent fill) using the ‘letterpress’ style in the ‘Text Shadow’ section. However, I can’t find this in the current UI. Does anyone know a way to do this? I’ll attach some screenshots of what I’m trying to create below.
Thank you
Solutions that I’ve found for previous UI but don’t work for me:
You can of course play around the stroke thickness and color and the fill color.
Note that this will override whatever color you give to your text, but will only show when you export.
Thanks for the quick response. This may sound stupid but I’m new to Webflow and still running on the basic free account. Am I still able to edit my code like you suggested?
Also, will that code allow me to have multiple styles in the same div, or will I have to make them separate?
Hmm, I cannot recall if the free account allows you add custom code, but try to check it out. From your project, left top corner, click on the burger menu, and go to project settings.
Yea yea, you can apply any style you want from your Webflow designer. Having multiple CSS rules works fine, no worries. Like I said, the only property that this will override is the font’s color.
Now since you have a free plan, you won’t be able to export it, so the result will appear only when you publish it /stage it (Webflow lets you stage 2 websites with the free plan).
You mentioned about the colour changing. If I want a transparent text fill plus the stroke, that will all be fine once I export? It just will change the colour in the webflow preview? Sorry if I’m not understanding this correctly - I’m new to all this .
I get what you’re saying about having multiple text styles tho. I’ll just need to assign the individual bits of text as the ‘stroke class’ and ‘filled text class’ etc. Right?
Haha no worries mate.
Yes, any color you give to your text in your Webflow file, the color you now see in your preview, will no longer show once you add the code and export it. The color you set in your -webkit-text-fill-color (transparent white, black, any color), will overwrite the initial text color.
And yes exactly, give the texts you want to have the stroke property a different name than the regular texts. If the stroked text needs to have the same properties as a regular text in the same section (except for the stroke, obviously), it is easier to then make it a combo class. Your class name will look like this: class=“filled-text stroke-text”, and in your custom code simply add it like this:
Just to be clear, you weren’t able to do that before, and the new shadow panel allows you all you could do before. Letterpress was just a preset for a 1px shift of the shadow, but in no way you could do a border with it IIRC.
@Mr_Finn is pointing to the right answer here with CSS text-stroke.
.