Seal Chop

How it works

Seal Chop is a static shadow & press text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Seal Chop exposes 5 dedicated controls — Seal Hue, Erosion, Tilt, Rim and Relief Depth — 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

/* Seal Chop — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Anton', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  background: hsl(353 60% 44%);
  color: hsl(38 55% 95%);
  padding: 0.6em 1.15em 0.7em;
  border-radius: 0.24em;
  transform: rotate(-3deg);
  box-shadow: 0 0.55em 1.3em hsl(0 0% 0% / 0.55), 0 0 0 1px hsl(353 45% 68% / 0.1);
  text-shadow: 0.75px 0.75px 0 hsl(0 0% 0% / 0.6), -0.75px -0.75px 0 hsl(0 0% 100% / 0.3);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22text-effect-erode%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.014%200.02%22%20numOctaves%3D%223%22%20seed%3D%227%22%20result%3D%22turb%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22turb%22%20scale%3D%2215.6%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%20result%3D%22disp%22%2F%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.09%22%20numOctaves%3D%222%22%20seed%3D%223%22%20result%3D%22fine%22%2F%3E%3CfeColorMatrix%20in%3D%22fine%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%2026%20-23.3%22%20result%3D%22speck%22%2F%3E%3CfeComposite%20in%3D%22disp%22%20in2%3D%22speck%22%20operator%3D%22out%22%20result%3D%22eroded%22%2F%3E%3C%2Ffilter%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%22388%22%20height%3D%22188%22%20rx%3D%2216%22%20fill%3D%22white%22%20filter%3D%22url(%23text-effect-erode)%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22text-effect-erode%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.014%200.02%22%20numOctaves%3D%223%22%20seed%3D%227%22%20result%3D%22turb%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22turb%22%20scale%3D%2215.6%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%20result%3D%22disp%22%2F%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.09%22%20numOctaves%3D%222%22%20seed%3D%223%22%20result%3D%22fine%22%2F%3E%3CfeColorMatrix%20in%3D%22fine%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%2026%20-23.3%22%20result%3D%22speck%22%2F%3E%3CfeComposite%20in%3D%22disp%22%20in2%3D%22speck%22%20operator%3D%22out%22%20result%3D%22eroded%22%2F%3E%3C%2Ffilter%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%22388%22%20height%3D%22188%22%20rx%3D%2216%22%20fill%3D%22white%22%20filter%3D%22url(%23text-effect-erode)%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.text-effect::before {
  content: "";
  position: absolute;
  inset: 0.34em;
  border: 0.1em solid hsl(38 40% 96% / 0.85);
  border-radius: 0.16em;
  pointer-events: none;
}

Related Shadow & Press effects

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