Text stroke underneath the text


I just started using Webflow and have gotten stuck on something that seems like it should be super easy to do… I want to have a white outline around the text so the illustrations and the text don’t “collide” — a stroke around 30 px. Please see attached image. The style-tool’s stroke feature “eats” into the letters, and with as much as 30 px, they disappear, so I can’t use that. The text needs to be on top of the stroke.

I tried a solution where I use two layers of text, and make the bottom text white, with thick white outlines, but that seems like a bad solution, especially for the CMS later.

Help!! :slight_smile:

Hi, it’s easy in mind, but a problem in CSS🙃

Try read this article for understand how it works: Can you create beautiful stroked text in CSS? - LogRocket Blog

Thanks for the link. To me it might as well have been in Greek though. :slight_smile: It seems as if he is suggesting SVG but it seems as if he is not really describing how; he is just going through IMDB and criticizing it for bad coding. I know a little about CSS but that was kind of the first time I heared about SVG :slight_smile: Also, how does this work in Webflow? Where should I add the code?

What I’m looking for is some sort of step-by-step instruction for Webflow.