Create Outlined Text with CSS

This weeks CSS tutorial is a cool text effect code from my CSS Cheat Sheet. A few pro tips: it works best with a thicker font, and you can adjust the outline color and the inside color using HEX color codes, and you can use this effect on any text type on your site, but I do recommend using a larger heading font.

Anywho, enough with the intro; Check out this quick tutorial video and use the code below to get you started.


h1 {
color: transparent!important;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000000;

Ready for more codes?

This is one of over 50 CSS codes in my CSS Cheat Sheet. Loved by Squarespace designers around the world, you can get my entire collection of codes designed exclusively for Squarespace sites in one PDF! Stop spending hours browsing the web and download the only resource you need to take your designs to the next level.