KPC
Kevin Powell - Community•3y ago
TheBassGuy 🎛🎚

I want to add an outside stroke to my text

Hi, I want to add an outside stroke to my text but with -webkit-text-stroke I am only able to apply inside stroke and with the text-shadow trick, it looks broken
11 Replies
TheBassGuy 🎛🎚
TheBassGuy 🎛🎚OP•3y ago
this is what it looks like with the text-shadow trick
TheBassGuy 🎛🎚
TheBassGuy 🎛🎚OP•3y ago
.font-outline-4 {
  /* -webkit-text-stroke: 4px black outside; */
  text-shadow: -4px -4px 0 #000000, 4px 4px 0 #000000, -4px 4px 0 #000000, 4px -4px 0 #000000;
}
.font-outline-4 {
  /* -webkit-text-stroke: 4px black outside; */
  text-shadow: -4px -4px 0 #000000, 4px 4px 0 #000000, -4px 4px 0 #000000, 4px -4px 0 #000000;
}
TheBassGuy 🎛🎚
TheBassGuy 🎛🎚OP•3y ago
I want it to look like this
~MARSMAN~
~MARSMAN~•3y ago
You can use drop-shadow Use it for the shadow. And use the -webkit-text-stroke for the outline around the letters.
~MARSMAN~
~MARSMAN~•3y ago
~MARSMAN~
~MARSMAN~•3y ago
But you gonna need to control the shadow position specially if your font size is responsive
Electronic
Electronic•3y ago
Would have thought a text shadow will do but nice solution marsman
~MARSMAN~
~MARSMAN~•3y ago
True text shadow is even more compatible than filter 🙌
TheBassGuy 🎛🎚
TheBassGuy 🎛🎚OP•3y ago
which one shall I use? and the -webkit-text-stroke gives an inside text stroke, what should I do to get an outside text stroke?
~MARSMAN~
~MARSMAN~•3y ago
Both gives same result, but go with text shadow Hmm I'm not really sure.. I just woke up so brain still out of service lol
TheBassGuy 🎛🎚
TheBassGuy 🎛🎚OP•3y ago
no worries dude, if some idea comes up, then I'm here :D

Did you find this page helpful?