← Atlas · Topics: typography-and-styles, motion
CSS Text Effects
- Type
- component library
- Verdict
- Useful
- Licence
- Ship licence, open source permissive
open-source-permissiveMIT / Open source - Agent channels
- prompts
- Pricing
- free
- Reviewed
What it is
CSS Text Effects is a collection of 90 animated text effects built with pure CSS, no JavaScript or external dependencies. It includes animations like aurora gradients, glitches, flip-flap counters, and liquid fills.
When to open it
Open this resource when you need special text effects for headlines, logos, brand effects, or elements that require impactful typographic animations. Each effect is optimized and accessible.
Most useful
- 90 distinct effects with descriptive names like Borealis, Phosphor, and Whiplash
- Copy-paste ready: each effect includes CSS code ready to use
- Built-in AI prompts: each effect has a prompt to reproduce or adapt it with agents
- Accessibility integrated: respects
prefers-reduced-motionfor users sensitive to motion - Customizable tokens: use
--inkvariables to change colors easily
Using it with agents
Each effect includes a prompt describing the technique and parameters. You can copy the prompt and send it to Claude to recreate, modify, or combine effects. The CSS is well-documented so agents understand how it works.
Watch out for
- Effects are pure CSS; some older browsers may not fully support them
- Some effects can be computationally intensive if used on many elements simultaneously
- The focus on animation requires respecting
prefers-reduced-motionin production
Reusable ideas
- Neon effects for tech branding
- Typewriter for page intros
- Chrome and metallic for modern logos
- Wave for long text or poetry
- 3D depth for impactful headlines
- Hologram for sci-fi or futurism
- Glass morphism for glassmorphic designs
- Kinetic for text that reacts to scroll