Animated Text Generator

Generate CSS text animations: fade-in, slide-up, typewriter, bounce, wave, and more.

Animation Settings

Animation Type

Text

Font Size32px

Duration0.8s

Delay0s

Text Color

Preview

Hello World

Generated CSS

@keyframes anim-text { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.animated-text {
  font-size: 32px;
  font-weight: 700;
  color: #1d1d1f;
  opacity: 0;
  animation: anim-text 0.8s ease 0s forwards;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Animated Text Generator?

Generate CSS text animations: typing effect, word cycling, glitch, fade-in-words, and more. Copy the complete keyframes and HTML.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Animated Text Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Choose an effect

Select from typing cursor, word flip, glitch, fade-in words, wave, or colour shift. The preview shows the animation on your text.

Enter your text

Type the text you want animated. For word-cycling effects, enter each word on a separate line.

Copy CSS and HTML

Click Copy to get the keyframes, base styles, and the HTML structure needed for the effect to work.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Typing cursor effect */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #6C2EF5;
  animation:
    typing 3s steps(30) both,
    blink  0.75s step-end infinite;
  width: fit-content;
}
@keyframes typing {
  from { width: 0 }
  to   { width: 100% }
}
@keyframes blink {
  0%, 100% { border-color: transparent }
  50%       { border-color: #6C2EF5 }
}

Animated text effects are best used on headlines and hero sections. Avoid them on body text or any content the user needs to read quickly.

Pro tips

Pro tips for better results

★

Limit animated text to one element per page

Two or more text animations competing for attention are distracting. Pick one hero element for the effect.

★

The typing effect requires a fixed character count in steps()

steps(N) in the typing animation should match the character count of your text. For "Hello World" (11 characters), use steps(11). Mismatched values cause the cursor to jump.

★

Always include prefers-reduced-motion fallback

Replace text animations with a static display when prefers-reduced-motion: reduce is set. Some users experience discomfort or motion sickness from animated text.

FAQ

Frequently asked questions

The basic typing animation works best on single-line text. Multi-line typing effects require JavaScript to sequence line-by-line reveals. The CSS-only version wraps oddly on long text.

No. Everything runs in your browser. Nothing is sent to a server.