🎨 Text Transformations & Style Showcase

Click Copy JSX to copy React code, or Copy HTML for plain HTML.
Example: titleCase("beautiful heading designs") → Beautiful Heading Designs

⚠️ For the Glitch heading, add this @keyframes to your global CSS:

@keyframes glitch-shake {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -2px); }
  100% { transform: translate(0); }
}

Headings

✦ Radiant Gradient ✦

3D DEPTH

NEON NIGHTS

Timeless Elegance

☕ Retro Vibes ☕

GLITCH

☁️ Soft & Cloudy ☁️

Whimsical Touch

Paragraphs

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. Soft, light, and airy.

The quick brown fox jumps over the lazy dog. Dark and bold.

The quick brown fox jumps over the lazy dog. Vintage vibes.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. Modern card style.

"The quick brown fox jumps over the lazy dog. A wise quote.

Clean and modern sans-serif text. Perfect for UI and web content.

A friendly, handwritten touch for personal notes and quotes.

// Monospace for code snippets or technical content. console.log("Hello, world!");

BOLD OUTLINE EFFECT

Like a yellow marker – perfect for highlighting important notes.

📘 Troubleshooting

JSX not rendering styles? Make sure you're pasting into a React component file (`.jsx` or `.tsx`) and that React is imported.
HTML not rendering styles? Ensure you're pasting into an HTML file or a raw HTML string in your framework.
Gradient text not visible? Some browsers require `-webkit-background-clip: text` – we've included it in both versions.
Glitch animation not working? Add the `@keyframes` rule to your global CSS.

Utility functions are also available in this file: capitalize, titleCase, reverse, camelCase, kebabCase, snakeCase, truncate, normalizeSpaces, slugify, wordCount, pad