Torn Paper Split

How it works

Torn Paper Split is a static retro & themed text effect rendered entirely in CSS. A data-text attribute mirrors the word into ::before/::after layers, so copy that attribute together with the CSS.

Controls

Torn Paper Split exposes 4 dedicated controls — Tear Angle, Jaggedness, Separation and Paper Tint — 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

/* Torn Paper Split — made with TEXT-FX · https://text-fx.app
 * HTML: the element needs a data-text attribute equal to its text.
 * Font: 'Recursive', sans-serif (load from Google Fonts).
 */

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

.text-effect {
  position: relative;
  display: inline-block;
  color: hsl(24 9% 96%);
  text-shadow: 0 2.8px 5.5px rgba(0,0,0,0.55);
}
.text-effect::before,
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: hsl(24 14% 82%);
  -webkit-text-stroke: 0.45px hsl(24 16% 32%);
  pointer-events: none;
}
.text-effect::before {
  clip-path: polygon(0% 0%, 100% 0%, 100% 60.84%, 92.85% 66.6%, 83.87% 68.03%, 76.79% 50.01%, 71.98% 61.7%, 63.14% 62.58%, 58.89% 52.93%, 50.85% 46.79%, 43.14% 41.67%, 35.1% 48.95%, 30.12% 44.3%, 21.42% 40.62%, 12.97% 42.28%, 5.49% 30.46%, 0% 46.43%);
  transform: translate(-1.8px, -5px) rotate(-3.5deg);
}
.text-effect::after {
  clip-path: polygon(0% 46.43%, 5.49% 30.46%, 12.97% 42.28%, 21.42% 40.62%, 30.12% 44.3%, 35.1% 48.95%, 43.14% 41.67%, 50.85% 46.79%, 58.89% 52.93%, 63.14% 62.58%, 71.98% 61.7%, 76.79% 50.01%, 83.87% 68.03%, 92.85% 66.6%, 100% 60.84%, 100% 100%, 0% 100%);
  transform: translate(1.8px, 5px) rotate(3.5deg);
}

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: 900;
  letter-spacing: 2px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  color: hsl(24 9% 96%);
  text-shadow: 0 2.8px 5.5px rgba(0,0,0,0.55);
}
.text-effect::before,
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: hsl(24 14% 82%);
  -webkit-text-stroke: 0.45px hsl(24 16% 32%);
  pointer-events: none;
}
.text-effect::before {
  clip-path: polygon(0% 0%, 100% 0%, 100% 60.84%, 92.85% 66.6%, 83.87% 68.03%, 76.79% 50.01%, 71.98% 61.7%, 63.14% 62.58%, 58.89% 52.93%, 50.85% 46.79%, 43.14% 41.67%, 35.1% 48.95%, 30.12% 44.3%, 21.42% 40.62%, 12.97% 42.28%, 5.49% 30.46%, 0% 46.43%);
  transform: translate(-1.8px, -5px) rotate(-3.5deg);
}
.text-effect::after {
  clip-path: polygon(0% 46.43%, 5.49% 30.46%, 12.97% 42.28%, 21.42% 40.62%, 30.12% 44.3%, 35.1% 48.95%, 43.14% 41.67%, 50.85% 46.79%, 58.89% 52.93%, 63.14% 62.58%, 71.98% 61.7%, 76.79% 50.01%, 83.87% 68.03%, 92.85% 66.6%, 100% 60.84%, 100% 100%, 0% 100%);
  transform: translate(1.8px, 5px) rotate(3.5deg);
}
</style>

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

Related Retro & Themed effects

• Vaporwave
• Distress Stamp
• Chalkboard
• Riso Misregister
• Pixel / 8-bit