OneTaskBy Tim King · Updated
Text Scramble Effect Generator
Headline Decoding From Random Letters, Symbols, Binary or Hex, Tuned by Frames and Speed
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Text Scramble Effect works
A text scramble effect shows a word as a jumble of random characters that settles, one letter at a time, into the real text, like a code being cracked. Type your text, pick the characters it scrambles through and the speed, then copy the CSS. There is no JavaScript in the result.
Scramble and decode animations are usually written in JavaScript: a timer swaps each letter for a
random character many times a second until it locks in place. This generator does the same work
once, in advance, and writes every frame into a CSS @keyframes rule that animates the content
of a ::after pseudo-element. Browsers treat content as a discrete property, so each keyframe
snaps straight to its string with no blending, which is exactly the flicker the effect needs.
How the text scramble effect is built
Each frame locks in a few more letters from the left, and every letter still unsolved gets a fresh random pick from the character set you chose. Spaces never scramble, so the shape of the phrase is visible from the first frame. Frames sets how many distinct jumbles you see and Duration how long the whole decode takes; around 15 to 25 frames over one to two seconds reads as fast without turning into a blur. The random picks are seeded from your text, so the same text gives the same CSS every time.
Choosing a font
A monospace font keeps every character the same width, so the line does not jiggle as letters change. A proportional sans-serif looks softer but the width shifts slightly on each frame, which some designs like and others find distracting.
Accessibility
Text in ::after is read by some screen readers and skipped by others, so the paragraph carries
role="img" and an aria-label with the real text. A prefers-reduced-motion rule skips the
animation and shows the final text straight away for visitors who turned motion off.
FAQ
Why does the scramble not run in my page?
Check that the @keyframes name is not used by another rule in your stylesheet, because the last
definition wins. Also make sure the element is visible when the page loads; the animation runs once
when the element is first styled, so a hidden element may finish before anyone sees it.
Can I trigger the effect on hover instead of on load?
Yes. Move the animation line into a .scramble:hover::after rule, so it starts when the pointer
enters and resets when it leaves. For a scroll trigger, add a class with an IntersectionObserver
and put the animation under that class.
How long can the text be?
The tool accepts up to 60 characters. Every frame repeats the whole string, so long text makes a large stylesheet; for a paragraph, scramble only the headline and let the body fade in normally.
Does it work in every browser?
Animating content works in current Chrome, Edge, Firefox and Safari. An old browser that cannot
animate it simply shows the final text from the base content rule, so nothing breaks.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Text Animation
Animate a headline letter by letter and copy the CSS.
Scroll Animation
Preview scroll reveal effects and copy the CSS or JS.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
Easing Comparison
Run two CSS easings side by side and copy the winner.