Ransom Note

How it works

Ransom Note is a static retro & themed 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.

Controls

Ransom Note exposes 3 dedicated controls — Palette, Tilt and Chip Padding — 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

/* Ransom Note — made with TEXT-FX · https://text-fx.app
 * HTML: each character is wrapped in a <span> — see the HTML export.
 * Font: 'Archivo Black', sans-serif, 'Bungee', cursive, 'Syne', sans-serif, 'Space Mono', monospace (load from Google Fonts).
 */

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

.text-effect {
  white-space: pre;
  line-height: 1.75;
}
.text-effect .fx-ch {
  display: inline-block;
  vertical-align: middle;
  margin: 0.08em 0.045em;
  padding: calc(0.12em + var(--text-effect-pj, 0em)) calc(0.18em + var(--text-effect-pj, 0em));
  border: 1px solid hsl(45 20% 72%);
  border-radius: 2px;
  background: hsl(45 30% 90%);
  color: hsl(0 0% 12%);
  box-shadow: 0.06em 0.09em 0 hsl(0 0% 0% / 0.5), 0 0 0 1px hsl(0 0% 100% / 0.16), inset 0 0.05em 0.04em hsl(0 0% 100% / 0.14);
  transform: translateY(calc(var(--text-effect-dy, 0) * 1em)) rotate(calc(var(--text-effect-r, 0) * 5deg));
}
.text-effect .fx-ch:nth-child(5n+2) { font-family: 'Bungee', cursive; }
.text-effect .fx-ch:nth-child(5n+3) { font-family: 'Space Mono', monospace; }
.text-effect .fx-ch:nth-child(5n+4) { font-family: 'Syne', sans-serif; }
.text-effect .fx-ch:nth-child(5n) { font-family: 'Archivo Black', sans-serif; }
.text-effect .fx-ch:nth-child(4n+1) {
  background: hsl(45 30% 90%);
  color: hsl(0 0% 12%);
  border-color: hsl(45 20% 72%);
}
.text-effect .fx-ch:nth-child(4n+2) {
  background: hsl(0 0% 98%);
  color: hsl(0 0% 10%);
  border-color: hsl(0 0% 78%);
}
.text-effect .fx-ch:nth-child(4n+3) {
  background: hsl(0 0% 11%);
  color: hsl(0 0% 96%);
  border-color: hsl(0 0% 34%);
}
.text-effect .fx-ch:nth-child(4n) {
  background: hsl(4 66% 51%);
  color: hsl(45 45% 96%);
  border-color: hsl(4 55% 36%);
}
.text-effect .fx-ch:nth-child(6n+1) { --text-effect-r: -1; --text-effect-dy: -0.05; --text-effect-pj: 0.01em; }
.text-effect .fx-ch:nth-child(6n+2) { --text-effect-r: 0.6; --text-effect-dy: 0.04; --text-effect-pj: -0.02em; }
.text-effect .fx-ch:nth-child(6n+3) { --text-effect-r: -0.35; --text-effect-dy: 0.06; --text-effect-pj: 0.03em; }
.text-effect .fx-ch:nth-child(6n+4) { --text-effect-r: 0.9; --text-effect-dy: -0.04; --text-effect-pj: -0.01em; }
.text-effect .fx-ch:nth-child(6n+5) { --text-effect-r: -0.7; --text-effect-dy: 0.02; --text-effect-pj: 0.02em; }
.text-effect .fx-ch:nth-child(6n) { --text-effect-r: 0.4; --text-effect-dy: -0.06; --text-effect-pj: 0em; }
.text-effect .fx-ch.fx-sp {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
  padding: 0;
  margin: 0;
}

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: 'Archivo Black', sans-serif;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  white-space: pre;
  line-height: 1.75;
}
.text-effect .fx-ch {
  display: inline-block;
  vertical-align: middle;
  margin: 0.08em 0.045em;
  padding: calc(0.12em + var(--text-effect-pj, 0em)) calc(0.18em + var(--text-effect-pj, 0em));
  border: 1px solid hsl(45 20% 72%);
  border-radius: 2px;
  background: hsl(45 30% 90%);
  color: hsl(0 0% 12%);
  box-shadow: 0.06em 0.09em 0 hsl(0 0% 0% / 0.5), 0 0 0 1px hsl(0 0% 100% / 0.16), inset 0 0.05em 0.04em hsl(0 0% 100% / 0.14);
  transform: translateY(calc(var(--text-effect-dy, 0) * 1em)) rotate(calc(var(--text-effect-r, 0) * 5deg));
}
.text-effect .fx-ch:nth-child(5n+2) { font-family: 'Bungee', cursive; }
.text-effect .fx-ch:nth-child(5n+3) { font-family: 'Space Mono', monospace; }
.text-effect .fx-ch:nth-child(5n+4) { font-family: 'Syne', sans-serif; }
.text-effect .fx-ch:nth-child(5n) { font-family: 'Archivo Black', sans-serif; }
.text-effect .fx-ch:nth-child(4n+1) {
  background: hsl(45 30% 90%);
  color: hsl(0 0% 12%);
  border-color: hsl(45 20% 72%);
}
.text-effect .fx-ch:nth-child(4n+2) {
  background: hsl(0 0% 98%);
  color: hsl(0 0% 10%);
  border-color: hsl(0 0% 78%);
}
.text-effect .fx-ch:nth-child(4n+3) {
  background: hsl(0 0% 11%);
  color: hsl(0 0% 96%);
  border-color: hsl(0 0% 34%);
}
.text-effect .fx-ch:nth-child(4n) {
  background: hsl(4 66% 51%);
  color: hsl(45 45% 96%);
  border-color: hsl(4 55% 36%);
}
.text-effect .fx-ch:nth-child(6n+1) { --text-effect-r: -1; --text-effect-dy: -0.05; --text-effect-pj: 0.01em; }
.text-effect .fx-ch:nth-child(6n+2) { --text-effect-r: 0.6; --text-effect-dy: 0.04; --text-effect-pj: -0.02em; }
.text-effect .fx-ch:nth-child(6n+3) { --text-effect-r: -0.35; --text-effect-dy: 0.06; --text-effect-pj: 0.03em; }
.text-effect .fx-ch:nth-child(6n+4) { --text-effect-r: 0.9; --text-effect-dy: -0.04; --text-effect-pj: -0.01em; }
.text-effect .fx-ch:nth-child(6n+5) { --text-effect-r: -0.7; --text-effect-dy: 0.02; --text-effect-pj: 0.02em; }
.text-effect .fx-ch:nth-child(6n) { --text-effect-r: 0.4; --text-effect-dy: -0.06; --text-effect-pj: 0em; }
.text-effect .fx-ch.fx-sp {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
  padding: 0;
  margin: 0;
}
</style>

<div class="text-effect"><span class="fx-ch">Y</span><span class="fx-ch">o</span><span class="fx-ch">u</span><span class="fx-ch">r</span><span class="fx-ch fx-sp"> </span><span class="fx-ch">t</span><span class="fx-ch">e</span><span class="fx-ch">x</span><span class="fx-ch">t</span></div>

Related Retro & Themed effects

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