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:
- Using the drop-shadow filter to create 4 different shadows, one for each side of the text element
- 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:
