Hollow text hover effect with only three lines of CSS
Recently, I was checking Life At Spotify website and spotted this cool hollow text hover effect on the page. It looks like this.
Turns out, it only takes three lines of CSS to achieve this effect. Here’s how.
a:hover {
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #191414;
}
As you can tell, it’s the combination of -webkit-text-fill-color, -webkit-text-stroke-width, and -webkit-text-stroke-color CSS properties that make this effect possible.
The -webkit-text-fill-color property specifies the color of the text. The -webkit-text-stroke-width property specifies the width of the stroke around the text. The -webkit-text-stroke-color property specifies the color of the stroke around the text.
All of these properties are supported by all major browsers as well. So, you don’t have to worry about browser compatibility.
Here’s a CodePen for you to play around with.
See the Pen Animated gradient effect using CSS by Amit Merchant (@amit_merchant) on CodePen.
Fun fact: I liked it so much that I’ve implemented this effect on my website’s name in the header as well!
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
