CSS allows us to create a lot of cool text effects without really much effort. In this snippet I'll show you how to easily get an engraved effect on an heading element.

<h1>CSS engraved text</h1>

First just create an element where you'll want to apply the effect - in my case I used an 'h1'. Then, in CSS we just need to give it background color and set the color to 'transparent' - this background color will determine the actual color of our text. Finally we need to apply 'background-clip: text' and some 'text-shadow' to get the desired effect. If you want, you can mess around with the shadow values to see how that affects the final result.

h1{ font-weight: 800; font-size: 50px; text-transform: uppercase; letter-spacing: .08em; background-color: #8225E2; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(245,245,245,0.5) 3px 5px 1px; }

And that's it, all done!