Raised & Depressed Text

Raised & Depressed Text

by Csaba Hellinger

HTML

<name>CSS text-shadow:</name>
<span class="text-raised">Raised</span>
<span class="text-depressed">Depressed</span>

<name>CSS drop-shadow:</name>
<span class="drop-raised">Raised</span>
<span class="drop-depressed">Depressed</span>

<name>SVG filter:</name>
<span class="svg-raised">Raised</span>
<span class="svg-depressed">Depressed</span>



<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svg-raised">
    <feFlood flood-color="#fff" result="light-color" />
    <feConvolveMatrix in="SourceAlpha" kernelMatrix="1 0 0 0 0 0 0 0 -1" result="light-mask" />
    <feComposite in="light-color" operator="in" in2="light-mask" result="light" />

    <feFlood flood-color="#000" result="dark-color" />
    <feConvolveMatrix in="SourceAlpha" kernelMatrix="-1 0 0 0 0 0 0 0 1" result="dark-mask" />
    <feComposite in="dark-color" operator="in" in2="dark-mask" result="dark" />
    
    <feMerge>
      <feMergeNode in="SourceGraphic"/>
      <feMergeNode in="dark"/>
      <feMergeNode in="light"/>
    </feMerge>
  </filter>
  
  <filter id="svg-depressed">
    <feFlood flood-color="#fff" result="light-color" />
    <feConvolveMatrix in="SourceAlpha" kernelMatrix="-1 0 0 0 0 0 0 0 1" result="light-mask" />
    <feComposite in="light-color" operator="in" in2="light-mask" result="light" />

    <feFlood flood-color="#000" result="dark-color" />
    <feConvolveMatrix in="SourceAlpha" kernelMatrix="1 0 0 0 0 0 0 0 -1" result="dark-mask" />
    <feComposite in="dark-color" operator="in" in2="dark-mask" result="dark" />
    
    <feMerge>
      <feMergeNode in="SourceGraphic"/>
      <feMergeNode in="dark"/>
      <feMergeNode in="light"/>
    </feMerge>
  </filter>
</svg>

CSS

body {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 1rem;
  align-items: center;
  font-family: sans-serif;
  background: gray;  
}

span {
  font-size: 3rem;
  font-weight: 900;
  color: skyblue;
}

.text-raised {
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #fff;
}

.text-depressed {
  text-shadow:
    -1px -1px 0 #000,
    1px 1px 0 #fff;
}

.drop-raised {
  filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #fff);
}

.drop-depressed {
  filter: drop-shadow(-1px -1px 0 #000) drop-shadow(1px 1px 0 #fff);
}

.svg-raised {
  filter: url(#svg-raised);
}

.svg-depressed {
  filter: url(#svg-depressed);
}