How to make text stroke in CSS

Learn how to add text outlines to your web pages with CSS! We'll show you an example of how to use the text-shadow property.

CSS Text Stroke

CSS text stroke is a way to create an outline around text. It can be used to make text stand out from the background, or to give text a 3D effect. CSS text stroke can be used on any HTML element and is fairly easy to implement.

Here is an example of how to create a text stroke in CSS:

p {
  font-size: 28px;
  color: #000;
  text-shadow: -1px -1px 0 #fff,  
               1px -1px 0 #fff,
               -1px 1px 0 #fff,
               1px 1px 0 #fff;
}

The code above creates a text stroke around the element by adding a text-shadow property with four parameters. The first two parameters set the x and y offset of the shadow, and the last two parameters set the color of the shadow.

The text-shadow property can also be used to create a more subtle text stroke:

p {
  font-size: 28px;
  color: #000;
  text-shadow: 0 0 1px #fff;
}

This code creates a 1 pixel white text stroke around the element. The first two parameters set the x and y offset of the shadow, and the third parameter sets the color of the shadow. The fourth parameter sets the blur radius of the shadow, which is set to 0 in this example.

Text stroke can also be used to create a 3D effect. To create a 3D effect, multiple text shadows can be used:

p {
  font-size: 28px;
  color: #000;
  text-shadow: 0 2px 0 #fff, 
               0 -2px 0 #fff, 
               2px 0 0 #fff, 
               -2px 0 0 #fff;
}

This code creates a 3D effect by adding four text shadows with different x and y offsets. The first two parameters set the x and y offset of the shadow, and the last two parameters set the color of the shadow.

CSS text strokes are a great way to make text stand out from the background and add a bit of flair to your web page. With just a few lines of code, you can easily create text strokes and 3D effects.