How to add stroke/ outline to the text in CSS?

Demo:

*to see the text on the website click here.

Step1.

Add HTML

Create a div element and add some text:

<div class="text">Outline</div>

Step2.

Add CSS

Set the position of the text and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

Style the text:

.text {
  font-size: 100px;
  font-family: tahoma;
  font-weight: 900;
  -webkit-text-fill-color: #2a9d8f; 
  -webkit-text-stroke: 5px #264653;
  text-shadow: 5px 5px 10px #333;
}

Enjoy coding!

Share this: