Bevel Plate

How it works

Bevel Plate is a static shadow & press text effect rendered entirely in CSS. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS.

Controls

Bevel Plate exposes 5 dedicated controls — Metal, Light, Elevation, Bevel and Polish — 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

/* Bevel Plate — made with TEXT-FX · https://text-fx.app
 * HTML: 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: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.text-effect {
  color: hsl(44 58% 62%);
  filter: url(#text-effect-bevel);
}

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: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.text-effect {
  color: hsl(44 58% 62%);
  filter: url(#text-effect-bevel);
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-bevel" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3.1" result="bump"/>
  <feDiffuseLighting in="bump" surfaceScale="6.03" diffuseConstant="1.1" lighting-color="#d6b866" result="diffuse">
    <feDistantLight azimuth="320" elevation="49"/>
  </feDiffuseLighting>
  <feSpecularLighting in="bump" surfaceScale="6.03" specularConstant="0.74" specularExponent="36" lighting-color="#f8f6ed" result="spec">
    <feDistantLight azimuth="320" elevation="49"/>
  </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="plate"/>
  <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="fat"/>
  <feFlood flood-color="#2f2a1e" flood-opacity="0.32" result="rimC"/>
  <feComposite in="rimC" in2="fat" operator="in" result="rim"/>
  <feMerge>
    <feMergeNode in="rim"/>
    <feMergeNode in="plate"/>
  </feMerge>
</filter>
</defs></svg>

<div class="text-effect">Your text</div>

Related Shadow & Press effects

• Drop Shadow
• Emboss
• Hard Offset
• Letterpress
• Long Cast 45