outline stroke for text

Question

I'm trying to add an outline to text using CSS.

The problem is that the shadow not so good for stroke text perfectly.

Is there any way to do this with pure css ?

Here is my code :

.text-stroke {
  font-size: 200px;
  color: #fff;
  text-shadow: -1px -1px #2d4c79, 
                1px 1px #2d4c79, 
               -2px 2px #2d4c79, 
                2px -1px #2d4c79;
}

<div class="text-stroke">Text</div>

score 0 · Answer 1 · answered Aug 12 '20 at 12:16

0

You can use webkit-text-stroke

.text-stroke {
  font-size: 200px;
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: white;
}

<div class="text-stroke">Text</div>

answered Aug 12 '20 at 12:16

Itay Gal

10,706
6
36
75

is this work in Firefox or other browser not use webkit? – tobili Aug 12 '20 at 12:19
Works for me in Chrome, Firefox, IE edge – Itay Gal Aug 12 '20 at 12:22
https://caniuse.com/#feat=text-stroke – Itay Gal Aug 12 '20 at 12:23

outline stroke for text

1 Answers1