Kinetic Typography CSS Generator
Animate a headline letter by letter and get the HTML and CSS to paste into your site. Pick one of eight effects, a Google Font or your own font file, and choose whether it plays on its own, on hover or when it scrolls into view.
Copied.
This tool is free, with no account and no ads. If it saved you time, you can support it.
DonateHow to use
- Type your text in any language and pick a typeface, or upload or drop your own .ttf, .otf, .woff or .woff2 on the stage.
- Choose an animation and a trigger: autoplay, hover or scroll.
- Set the colour, size and speed, and check it on a dark, light or blue background.
- Copy everything as one snippet, or the HTML, CSS and JS separately. The code keeps the text readable for screen readers and stops moving for visitors who prefer less motion.
Questions
- Do I need JavaScript?
- Only for the scroll trigger, which uses a short IntersectionObserver snippet. Autoplay and hover are pure CSS.
- Can I use my own font?
- Yes. Upload a .ttf, .otf, .woff or .woff2 file to preview it. In your site, load the same font with @font-face and the generated CSS will use it.
- Will it slow my page down?
- No. The effects animate transform and opacity on each letter, which browsers handle on the GPU.