Skip to content
Index730 resources
Colorion CSS Text Effects

Colorion CSS Text Effects

78 pure-CSS animated text effects; copy the CSS or copy an agent prompt

Tier A · StrongAnimation LibraryBlock CollectionGallerytext-effects.colorion.co

(Visit text-effects.colorion.co ↗)(Repository)

A gallery of 78 self-contained animated text effects written in plain CSS, with no JavaScript and no dependencies. Each card gives you two copy buttons: the raw CSS, or a ready-made prompt that tells a coding agent how to rebuild the effect. Effects run from the usual (Teletype typewriter, Neon-Haus glow, Glitchcore) to the unusual (Split-Flap, Ransom-Note, Moire, Zoetrope, Caustics), all painted through --ink colour tokens and gated behind prefers-reduced-motion. It is part of the Colorion family of single-purpose CSS tools (gradients, loaders, toggles, tooltips, palettes).

For an agent

Reach for this when a hero headline or a 404 needs one memorable flourish and you do not want to pull in GSAP, Framer Motion or a React animation package for a single line of text; every effect is one block of CSS you paste next to your own styles. The per-effect 'Prompt' button is the real differentiator for an agent: copy that instead of the CSS when you need the effect adapted to a different font, colour token or element. Watch out that the snippets assume the site's --ink custom properties and some rely on duplicated text in data-* attributes, so re-map both to your own tokens and markup, and never stack more than one effect on the same element.

Why it is here. It is the rare motion resource that is framework-free, MIT, and readable straight out of the HTML, so it works equally well for a static landing page and for an agent that just needs the CSS. The prompt-per-effect export is a genuinely forward-looking distribution choice that most snippet galleries still lack.

Install command, framework, licence and component list.

Facts

License
MIT
Pricing
Free, Open source
Framework
Vanilla JS
Styling
Vanilla CSS, CSS custom properties
Distribution
Copy-paste snippet, GitHub repository, Web app / online tool
Platform
Web
Content type
Code
Agent readiness
Copy-paste ready code, Ships a ready LLM prompt, Readable open source
Accessibility
Honors reduced motion
Maturity
Actively maintained
GitHub stars
9

Components it ships

78 total
Text EffectAnimationTypewriter TextShimmerGlassmorphismTypography

Helps you build

4
HomepageFeaturesSplash Screen404

Notable for

  • 78 verified effects
  • pure CSS, zero dependencies
  • copy-as-agent-prompt per effect
  • respects prefers-reduced-motion
  • part of the Colorion tool family

Provenance

Verified 2026-08-16. HTTP 200. https://text-effects.colorion.co/ (fetched and raw HTML parsed; all 78 effect names and the 'Pure CSS - No dependencies - MIT licensed' footer read directly), https://api.github.com/repos/ckissi/colorion-text-effects (9 stars, last push 2026-08-10; note the repo carries no detected LICENSE file even though the site states MIT)

Also in Motion & Interaction

6
text-effects.colorion.coTier A