Engraved Leather Effect

Demonstration for a blog post: https://blog.tannernielsen.com/2019/01/21/Creating-an-Engraved-Leather-Effect-with-CSS/

by tannerntannern

HTML

<div class="leather textured">
  <h1 class="gold textured" data-text="Gold Engraving"></h1>
</div>

CSS

.textured {
  background-position: fixed;
  background-size: 900px 900px;
}

.leather {
  background-image: url(https://blog.tannernielsen.com/images/leather-texture.png);
  padding: 1em;
}

.gold {
  position: relative;
  font-size: 70pt;
}

.gold::before {
  content: attr(data-text);
  text-shadow: -3px -3px 5px rgba(0,0,0,.8), 1px 1px 2px rgba(255,255,255,.45);
}

.gold::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  
  background-position: inherit;
  background-size: inherit;
  background-image: url(https://blog.tannernielsen.com/images/gold-texture.png);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}