Text-shadow effect on an html element
You can achieve this with using text-stroke (creating the border around the text) and using text-shadow to set the correct offset for the color blue as shadow color.
The color property should be set the same as the background-color property of the surrounding element to get the effect.
-webkit-text-stroke is greatly supported (only not in Internet Explorer), read more about it at MDN.
What the properties of text-shadow do:
text-shadow: [horizontal-offset] [vertical-offset] [blur] [color];
Play around with your needs.
.hello {
-webkit-text-stroke: 0.09375rem #0d1b1e;
-o-text-stroke: 0.09375rem #0d1b1e;
text-stroke: 0.09375rem #0d1b1e;
color: #f2cee6;
letter-spacing: 6px;
text-shadow: 5px 5px 0px #2dc7ff;
}
/* For demo purpose only: background-color should match surrounding color for effect */
body {
font-family: sans-serif;
font-size: 50px;
background-color: #f2cee6;
}<h1><span class="hello">Hello</span> there!</h1>You can also get closer with only text-shadow like below
.hello {
color: #f2cee6;
letter-spacing: 6px;
text-shadow:
0 0 1.5px #0d1b1e,
0 0 1.5px #0d1b1e,
0 0 1.5px #0d1b1e,
0 0 1.5px #0d1b1e,
0 0 1.5px #0d1b1e,
0 0 1.5px #0d1b1e,
0 0 1.5px #0d1b1e,
0 0 1.5px #0d1b1e,
0 0 1.5px #0d1b1e,
5px 5px 0px #2dc7ff;
}
/* For demo purpose only: background-color should match surrounding color for effect */
body {
font-family: sans-serif;
font-size: 50px;
background-color: #f2cee6;
}<h1><span class="hello">Hello</span> there!</h1>related: Outline effect to text in Arabic using CSS