CSS - Combine text shadow with a text outline?

Question

I'm trying to accomplish this (don't mind the red background)

So here is what I got I can get a border around the text but then I can't combine it with a text shadow... How can I get around this? Maybe it's something with :before :after statements?

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    

    /*
    text-shadow: 0 0 5px #000000; 
    
    THIS WILL GIVE THE TEXT THE SHADOW*/
    
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    /*THIS WILL GIVE THE TEXT THE BORDER*/
    
    /*How can I combine these two?*/
}

<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

Maybe this is a correct answer https://stackoverflow.com/questions/13287164/css3-text-effect-text-outline-and-shadow-effect — maharr, Dec 19 '17 at 09:35

score 4 · Accepted Answer · answered Dec 19 '17 at 09:36

Maybe this solution is what you are looking for:

h1 {
   -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
     3px 3px 5px #000,
     -1px -1px 5px #000,  
     1px -1px 5px #000,
     -1px 1px 5px #000,
      1px 1px 5px #000;
}

<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

score 2 · Answer 2 · answered Dec 19 '17 at 09:37

have a look at this fiddle. you have to use -webkit-text-stroke and then you can use the stroke and shadow separately

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    -webkit-text-stroke: 1px black;
    }

<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

.

score 2 · Answer 3 · answered Dec 19 '17 at 09:40

Not sure if this is what you are looking for, but just adding another value with X and Y set to -2px should do it.

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px -2px 10px black;
}

<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

Note that in the above snippet, I've added -2px -2px 10px black which is -2px is X, the other is Y and the last which is 10px is the shadow spread.

score 2 · Answer 4 · answered Dec 19 '17 at 09:40

Something close to what your looking for.

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    

    color: white;
    text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
}

<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

score 2 · Answer 5 · answered Dec 19 '17 at 09:52

Try this one for all browsers worth covering:

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #fff, 1px -1px 0 #000, -1px 1px 0 #000; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */

filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */

}

<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

Or

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    

    
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000;


}

<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

CSS - Combine text shadow with a text outline?

5 Answers5