Go to homepage

Projects /

October 31, 2022

Stroke Text Effect

By CodyHouse
404 HTML, CSS, JS components. Download →

How to create an outline text effect in CSS.

Creating a stroke text effect in CSS is not as straightforward as one may think. We've already talked about the text-stroke property in a previous tutorial, but this property causes rendering problems in most browsers at the time of writing.

That's why we've explored a different technique, which consists of:

  1. Using the drop-shadow filter to create 4 different shadows, one for each side of the text element
  2. Setting the text color equal to the background color
.title {
  color: midnightblue;
  filter: drop-shadow(-0.5px 0 0 mistyrose)
          drop-shadow(0.5px 0 0 mistyrose)
          drop-shadow(0 -0.5px 0 mistyrose)
          drop-shadow(0 0.5px 0 mistyrose);

body {
  background-color: midnightblue;

A couple of notes: we didn't use the box-shadow property because it would create a shadow around the 'box' containing the text. The text-shadow property, on the other side, creates a rendering issue around the text corners. We coulnd't set a trasparent color because the shadow would disappear too and the text would be inaccessible.

It would be great if we could modify the spread value of the text-shadow property (e.g., text-shadow: 0 0 0 1px mistyrose;), but, unfortunately, only the box-shadow property supports the spread value.

Live demo:

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.