Spiral Text

How it works

Spiral Text is a static entrance & kinetic 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

Spiral Text exposes 4 dedicated controls — Turns, Start Angle, Ink Hue and Spin — 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

/* Spiral Text — made with TEXT-FX · https://text-fx.app
 * HTML: requires the inline <svg> filter defs — see the HTML export.
 * Font: 'Syne', sans-serif (load from Google Fonts).
 */

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

.text-effect {
  display: block;
  width: min(100%, 58vmin, 11em);
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  overflow: visible;
}
.text-effect .fx-coil {
  fill: none;
  stroke: url(#text-effect-ink);
  stroke-opacity: 0.22;
  stroke-width: 5px;
  stroke-linecap: round;
}
.text-effect text {
  font-size: 100px;
  fill: url(#text-effect-ink);
}
.text-effect .fx-g0 { stop-color: hsl(293 85% 70%); stop-opacity: 0.5; }
.text-effect .fx-g1 { stop-color: hsl(293 85% 70%); stop-opacity: 1; }

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: 'Syne', sans-serif;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: none;
}

.text-effect {
  display: block;
  width: min(100%, 58vmin, 11em);
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  overflow: visible;
}
.text-effect .fx-coil {
  fill: none;
  stroke: url(#text-effect-ink);
  stroke-opacity: 0.22;
  stroke-width: 5px;
  stroke-linecap: round;
}
.text-effect text {
  font-size: 100px;
  fill: url(#text-effect-ink);
}
.text-effect .fx-g0 { stop-color: hsl(293 85% 70%); stop-opacity: 0.5; }
.text-effect .fx-g1 { stop-color: hsl(293 85% 70%); stop-opacity: 1; }
</style>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-602 -602 1204 1204" aria-hidden="true" class="text-effect"><defs><radialGradient id="text-effect-ink" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="497"><stop class="fx-g0" offset="0%"></stop><stop class="fx-g1" offset="100%"></stop></radialGradient></defs><path id="text-effect-coil" class="fx-coil" d="M -496.92 8.67 L -486.7 -77.42 L -461.8 -159.7 L -423.24 -235.72 L -372.43 -303.24 L -311.13 -360.35 L -241.42 -405.48 L -165.56 -437.44 L -86 -455.49 L -5.24 -459.33 L 74.22 -449.08 L 149.97 -425.32 L 219.76 -389.03 L 281.54 -341.54 L 333.59 -284.52 L 374.47 -219.9 L 403.14 -149.8 L 418.97 -76.49 L 421.71 -2.26 L 411.52 70.57 L 388.98 139.81 L 355.03 203.39 L 310.93 259.48 L 258.25 306.51 L 198.77 343.21 L 134.47 368.68 L 67.42 382.35 L -0.26 384.07 L -66.47 374.02 L -129.21 352.78 L -186.62 321.25 L -237.06 280.6 L -279.13 232.31 L -311.72 178.02 L -334.04 119.55 L -345.64 58.79 L -346.42 -2.33 L -336.59 -61.92 L -316.73 -118.18 L -287.68 -169.45 L -250.56 -214.29 L -206.71 -251.45 L -157.67 -279.99 L -105.06 -299.24 L -50.62 -308.84 L 3.94 -308.75 L 56.91 -299.23 L 106.72 -280.82 L 151.89 -254.33 L 191.16 -220.8 L 223.47 -181.46 L 248.02 -137.7 L 264.27 -91 L 271.96 -42.89 L 271.09 5.1 L 261.94 51.46 L 245.06 94.83 L 221.2 133.93 L 191.33 167.68 L 156.55 195.2 L 118.12 215.83 L 77.36 229.15 L 35.6 234.99 L -5.8 233.42 L -45.57 224.73 L -82.51 209.46 L -115.57 188.31 L -143.85 162.15 L -166.63 132 L -183.41 98.95 L -193.88 64.15 L -197.95 28.77 L -195.75 -6.05 L -187.61 -39.22 L -174.02 -69.76 L -155.64 -96.82 L -133.27 -119.67 L -107.79 -137.78 L -80.16 -150.76 L -51.37 -158.45 L -22.38 -160.83 L 5.84 -158.09 L 32.43 -150.57 L 56.6 -138.74 L 77.68 -123.21 L 95.16 -104.69 L 108.64 -83.94 L 117.9 -61.78 L 122.88 -39.02 L 123.65 -16.45 L 120.45 5.18 L 113.62 25.19 L 103.62 43 L 91.02 58.16 L 76.41 70.3 L 60.45 79.22 L 43.79 84.82 L 27.1 87.16 L 10.96 86.4 L -4.06 82.81 L -17.5 76.76 L -28.99 68.68 L -38.24 59.06 L -45.1 48.43 L -49.52 37.31"></path><text><textPath href="#text-effect-coil">Your text</textPath></text></svg>

Related Entrance & Kinetic effects

• Fade In
• Letter Wave
• Stagger Reveal
• Typewriter
• Jelly Wobble