Maya Relief

How it works

Maya Relief is a static 3d & depth text effect rendered entirely in CSS. Each character is wrapped in its own span so it can animate independently — the HTML and JSX exports include that per-letter markup. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS.

Controls

Maya Relief exposes 4 dedicated controls — Stone, Relief Depth, Weathering and Cell Corners — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Maya Relief — made with TEXT-FX · https://text-fx.app
 * HTML: each character is wrapped in a <span> — see the HTML export; requires the inline <svg> filter defs — see the HTML export.
 * Font: 'Recursive', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Recursive', sans-serif;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  max-width: 100%;
  align-items: center;
  line-height: 1;
  gap: 0.26em;
  padding: 0.34em;
  background: hsl(34 24% 20%);
  border-radius: 0.256em;
  box-shadow: inset 0 0.05em 0 hsl(0 0% 100% / 0.06), inset 0 -0.05em 0.1em hsl(0 0% 0% / 0.55), 0 0.16em 0.3em hsl(0 0% 0% / 0.55);
  filter: url(#text-effect-weather);
}
.text-effect .fx-ch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.32em;
  height: 1.32em;
  border-radius: 24%;
  background: hsl(34 24% 40%);
  border: 0.055em solid hsl(34 30% 13%);
  box-shadow: 0 0.08em 0.16em hsl(0 0% 0% / 0.62), inset 0 0.05em 0.03em hsl(34 24% 78% / 0.1), inset 0 -0.07em 0.05em hsl(34 32% 4% / 0.5);
  overflow: hidden;
  transform: rotate(var(--rot, 0deg)) translateY(var(--jy, 0em));
}
.text-effect .fx-ch.fx-sp {
  width: 0.46em;
  background: none;
  border: none;
  box-shadow: none;
}
.text-effect .fx-glyph {
  position: relative;
  display: inline-block;
  font-size: 0.86em;
  line-height: 1;
  color: #c5b5a0;
  filter: url(#text-effect-carve);
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<!-- Made with TEXT-FX · https://text-fx.app -->

<style>
.text-effect {
  font-family: 'Recursive', sans-serif;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  max-width: 100%;
  align-items: center;
  line-height: 1;
  gap: 0.26em;
  padding: 0.34em;
  background: hsl(34 24% 20%);
  border-radius: 0.256em;
  box-shadow: inset 0 0.05em 0 hsl(0 0% 100% / 0.06), inset 0 -0.05em 0.1em hsl(0 0% 0% / 0.55), 0 0.16em 0.3em hsl(0 0% 0% / 0.55);
  filter: url(#text-effect-weather);
}
.text-effect .fx-ch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.32em;
  height: 1.32em;
  border-radius: 24%;
  background: hsl(34 24% 40%);
  border: 0.055em solid hsl(34 30% 13%);
  box-shadow: 0 0.08em 0.16em hsl(0 0% 0% / 0.62), inset 0 0.05em 0.03em hsl(34 24% 78% / 0.1), inset 0 -0.07em 0.05em hsl(34 32% 4% / 0.5);
  overflow: hidden;
  transform: rotate(var(--rot, 0deg)) translateY(var(--jy, 0em));
}
.text-effect .fx-ch.fx-sp {
  width: 0.46em;
  background: none;
  border: none;
  box-shadow: none;
}
.text-effect .fx-glyph {
  position: relative;
  display: inline-block;
  font-size: 0.86em;
  line-height: 1;
  color: #c5b5a0;
  filter: url(#text-effect-carve);
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-carve" x="-45%" y="-45%" width="190%" height="190%" color-interpolation-filters="sRGB">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3.55" result="bump"/>
  <feDiffuseLighting in="bump" surfaceScale="7.2" diffuseConstant="0.98" lighting-color="#c5b5a0" result="diffuse">
    <feDistantLight azimuth="268" elevation="44"/>
  </feDiffuseLighting>
  <feSpecularLighting in="bump" surfaceScale="7.2" specularConstant="0.06" specularExponent="6" lighting-color="#cec1ab" result="spec">
    <feDistantLight azimuth="268" elevation="44"/>
  </feSpecularLighting>
  <feComposite in="spec" in2="SourceAlpha" operator="in" result="specClip"/>
  <feComposite in="specClip" in2="diffuse" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="lit"/>
  <feComposite in="lit" in2="SourceAlpha" operator="in" result="relief"/>
  <feMorphology in="SourceAlpha" operator="dilate" radius="1.34" result="fat"/>
  <feFlood flood-color="#1a150f" flood-opacity="0.72" result="rimC"/>
  <feComposite in="rimC" in2="fat" operator="in" result="rim"/>
  <feMerge>
    <feMergeNode in="rim"/>
    <feMergeNode in="relief"/>
  </feMerge>
</filter>
<filter id="text-effect-weather" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
  <feTurbulence type="fractalNoise" baseFrequency="0.75 0.8" numOctaves="2" seed="9" result="n"/>
  <feColorMatrix in="n" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.25 0 0 0 0" result="speck"/>
  <feComposite in="speck" in2="SourceAlpha" operator="in" result="speckClip"/>
  <feBlend in="SourceGraphic" in2="speckClip" mode="multiply"/>
</filter>
</defs></svg>

<div class="text-effect"><span class="fx-ch" style="--i:0;--rot:0.13deg;--jy:0.003em"><span class="fx-glyph">Y</span></span><span class="fx-ch" style="--i:1;--rot:1.41deg;--jy:-0.032em"><span class="fx-glyph">o</span></span><span class="fx-ch" style="--i:2;--rot:-0.63deg;--jy:-0.021em"><span class="fx-glyph">u</span></span><span class="fx-ch" style="--i:3;--rot:0.1deg;--jy:0.026em"><span class="fx-glyph">r</span></span><span class="fx-ch fx-sp" style="--i:4"> </span><span class="fx-ch" style="--i:5;--rot:1.06deg;--jy:0.028em"><span class="fx-glyph">t</span></span><span class="fx-ch" style="--i:6;--rot:1.4deg;--jy:-0.027em"><span class="fx-glyph">e</span></span><span class="fx-ch" style="--i:7;--rot:-0.01deg;--jy:-0.02em"><span class="fx-glyph">x</span></span><span class="fx-ch" style="--i:8;--rot:1.2deg;--jy:0em"><span class="fx-glyph">t</span></span></div>

Related 3D & Depth effects

• 3D Extrude
• Isometric 3D
• Long Shadow
• Retro 3D
• Paper Cutout