Go to homepage

Projects /

October 31, 2022

Stroke Text Effect

By CodyHouse
400 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:

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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