Typography Studio

Ten text effects in one studio — gradient, animated gradient, aurora, split-color, metallic, neon, glow, outline, glass and 3D. Edit your headline live, dial in any font, weight and spacing, shuffle harmonious colors, then export clean CSS (reduced-motion safe) or Tailwind.

Preview

Click the text to edit it. Drag the sliders to taste.

Aurora

Effect

Text

Font

Weight800

Size88px

Letter spacing-2px

ItalicUppercase

Style

Color 1

#34d399

Color 2

#22d3ee

Color 3

#818cf8

Speed6s

Export

Add the class to your element. Animations honor prefers-reduced-motion.

@property --te-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.text-effect {
  display: inline-block;
  font-family: var(--font-space-grotesk), system-ui, sans-serif;
  font-size: 88px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -2px;
  background: conic-gradient(from var(--te-angle), #34d399, #22d3ee, #818cf8, #34d399);
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: te-spin 6s linear infinite;
}

@keyframes te-spin {
  to { --te-angle: 360deg; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .text-effect { animation: none; }
}