30 Modern CSS Text Effects (2026) – Animated Typography & UI Effects

CSS text effects allow you to transform simple typography into visually engaging, interactive elements using only HTML and CSS — without relying on JavaScript.

Modern web design in 2026 is no longer focused on static layouts and plain text. Instead, typography has become a central part of the user interface, playing a key role in how users interact with content, perceive brand identity, and navigate through digital experiences. Well-designed CSS text effects can dramatically improve visual hierarchy, increase user engagement, and create a memorable browsing experience.

With advanced CSS animations and transitions, text can now glow, move, morph, flicker, and react to user interactions. These effects are no longer just decorative — they serve a functional purpose by guiding attention, emphasizing important elements, and providing real-time visual feedback.

In this comprehensive guide, we showcase 30 modern CSS text effects built for real-world projects. These effects include automatic animations, hover interactions, and click feedback, making them suitable for landing pages, SaaS interfaces, portfolios, and eCommerce websites.

All examples are built using pure HTML and CSS, ensuring they are lightweight, fast-loading, and easy to integrate into any project, including WordPress. This makes them ideal for developers and designers who want high-performance UI without unnecessary complexity.

What are CSS text effects?
Why use animated text?
CSS techniques for text effects
Where to use text effects
Performance considerations
UX and UI impact
Accessibility best practices
30 modern text effects
Best practices
FAQ
Conclusion

What Are CSS Text Effects?

CSS text effects are visual transformations applied to text elements using CSS properties such as animations, transitions, gradients, and shadows. These effects enhance how text appears and behaves on a webpage, turning static content into interactive and dynamic components.

Unlike traditional styling methods that focus only on color, size, and spacing, modern text effects incorporate motion and interaction. This includes glowing text, animated gradients, glitch effects, typing animations, and more. These effects can be triggered automatically or in response to user interaction, such as hover or click events.

CSS text effects are widely used in modern UI design because they allow developers to create visually rich experiences without increasing page load times or adding JavaScript dependencies.

Why Use Animated Text Effects?

Animated text is more than just a visual enhancement — it plays a crucial role in user experience and engagement. When used correctly, it helps guide user attention, highlight important content, and create a sense of interactivity that keeps users engaged.

One of the main advantages of CSS text effects is their ability to increase click-through rates (CTR). Interactive text elements naturally draw attention, making users more likely to engage with links, buttons, and calls to action.

Additionally, animated text contributes to a premium and modern feel. Websites that incorporate subtle motion and responsive feedback often appear more professional and trustworthy, which can positively influence user perception and conversions.

From a usability perspective, animations provide feedback that confirms user actions. For example, hover effects signal that an element is clickable, while click animations confirm interaction.

CSS Techniques for Text Effects

Modern CSS text effects are built using a combination of powerful CSS features. By combining these techniques, developers can create highly sophisticated animations and interactions.

CSS keyframe animations for continuous motion
Transitions for smooth state changes
Transform properties (scale, rotate, translate)
Text gradients with background clipping
Text-shadow and glow effects
Pseudo-elements (::before and ::after)
Clip-path for advanced masking animations
Letter-spacing and typography manipulation

These techniques allow developers to create everything from subtle hover effects to complex animated typography systems.

Where to Use CSS Text Effects

CSS text effects can be used across various parts of a website to enhance both aesthetics and functionality.

Hero sections and landing pages
Call-to-action buttons
Navigation menus
Portfolio showcases
Product highlights in eCommerce
SaaS dashboards and UI components

When applied strategically, these effects can significantly improve user engagement and visual appeal.

Performance Considerations

Performance is a critical factor when working with animations. While CSS text effects are generally lightweight, poorly optimized animations can negatively impact performance, especially on mobile devices.

To ensure optimal performance, it is recommended to use GPU-accelerated properties such as transform and opacity. These properties are handled more efficiently by browsers and result in smoother animations.

It is also important to avoid excessive animations across the entire page. Instead, focus on key elements where animation adds value.

UX and UI Impact

From a UI/UX perspective, text effects should enhance usability rather than distract from it. The goal is to guide users and improve interaction, not overwhelm them with excessive motion.

Well-designed animations create a sense of responsiveness and feedback, making the interface feel alive and intuitive. This leads to better user satisfaction and longer session durations.

Accessibility Best Practices

Accessibility should always be considered when implementing animations. Not all users respond well to motion, so it is important to provide fallback options or respect user preferences.

Using the prefers-reduced-motion media query allows you to disable animations for users who prefer minimal motion. This ensures your website remains inclusive and user-friendly.

Text should always remain readable, regardless of animation. Avoid effects that distort or obscure the content.

30 Modern CSS Text Effects – HTML & CSS Examples

Below you will find 30 modern CSS text effects designed for real-world usage. Each example includes automatic animations, hover interactions, and click feedback, making them fully interactive and ready for implementation.

1. Cyber Glow Pulse Text

Cyber Glow Pulse Text creates a futuristic glowing text effect where the neon pulse grows and fades like digital energy.

The glow pulses automatically every few seconds
On hover, the glow becomes stronger and brighter
On click, the text triggers a quick energy burst

Cyber Glow Text

<div class="cyberpulse-demo">
<span class="cyberpulse-text">
Cyber Glow Text
</span>
</div>

.cyberpulse-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.cyberpulse-text{
display:inline-block;
font-size:36px;
font-weight:800;
color:#22d3ee;
letter-spacing:1px;
text-shadow:
0 0 5px #22d3ee,
0 0 12px #06b6d4,
0 0 24px #0891b2;
animation:cyberPulse 2.4s ease-in-out infinite;
}

@keyframes cyberPulse{
0%,100%{
transform:scale(1);
text-shadow:
0 0 5px #22d3ee,
0 0 12px #06b6d4,
0 0 24px #0891b2;
}
50%{
transform:scale(1.04);
text-shadow:
0 0 10px #67e8f9,
0 0 24px #22d3ee,
0 0 50px #06b6d4,
0 0 90px #0891b2;
}
}

.cyberpulse-text:hover{
animation:cyberPulseHover 1.2s ease-in-out infinite;
}

@keyframes cyberPulseHover{
0%,100%{
transform:scale(1);
text-shadow:
0 0 10px #67e8f9,
0 0 30px #22d3ee,
0 0 60px #06b6d4;
}
50%{
transform:scale(1.08);
text-shadow:
0 0 20px #a5f3fc,
0 0 50px #22d3ee,
0 0 100px #06b6d4,
0 0 150px #0891b2;
}
}

.cyberpulse-text:active{
animation:cyberPulseClick .35s ease;
}

@keyframes cyberPulseClick{
0%{transform:scale(1);}
50%{transform:scale(1.18);}
100%{transform:scale(1);}
}

2. Neon Flicker Text

Neon Flicker Text creates a realistic neon sign effect where the text flickers like an electric sign.

The text flickers automatically like a neon sign
On hover, the glow becomes stable and brighter
On click, a quick flash animation is triggered

Neon Flicker Text

<div class="neonflicker-demo">
<span class="neonflicker-text">
Neon Flicker Text
</span>
</div>

.neonflicker-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.neonflicker-text{
display:inline-block;
font-size:36px;
font-weight:800;
letter-spacing:2px;
color:#22d3ee;
text-shadow:
0 0 5px #22d3ee,
0 0 10px #22d3ee,
0 0 25px #06b6d4,
0 0 55px #0891b2;
animation:neonFlickerText 2.8s infinite;
}

@keyframes neonFlickerText{
0%,18%,22%,25%,53%,57%,100%{
opacity:1;
text-shadow:
0 0 5px #22d3ee,
0 0 10px #22d3ee,
0 0 25px #06b6d4,
0 0 55px #0891b2;
}
20%,24%,55%{
opacity:.35;
text-shadow:
0 0 2px #22d3ee,
0 0 5px #06b6d4,
0 0 12px #0891b2;
}
}

.neonflicker-text:hover{
animation:none;
opacity:1;
text-shadow:
0 0 8px #a5f3fc,
0 0 18px #67e8f9,
0 0 45px #22d3ee,
0 0 90px #06b6d4,
0 0 140px #0891b2;
}

.neonflicker-text:active{
animation:neonFlashText .3s ease;
}

@keyframes neonFlashText{
0%{
opacity:1;
}
50%{
opacity:1;
text-shadow:
0 0 20px #ffffff,
0 0 50px #a5f3fc,
0 0 100px #22d3ee,
0 0 180px #06b6d4;
}
100%{
opacity:1;
}
}

3. Glitch Distortion Text

Glitch Distortion Text creates a broken digital signal effect with layered RGB distortion.

Text layers shift automatically like a corrupted signal
On hover, the glitch becomes more intense
On click, the text shakes with a fast distortion burst

Glitch Distortion

<div class="glitchdist-demo">
<span class="glitchdist-text" data-text="Glitch Distortion">
<span>Glitch Distortion</span>
</span>
</div>

.glitchdist-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.glitchdist-text{
position:relative;
display:inline-block;
font-size:36px;
font-weight:800;
color:#ffffff;
letter-spacing:1px;
}

.glitchdist-text span{
position:relative;
z-index:3;
}

.glitchdist-text::before,
.glitchdist-text::after{
content:attr(data-text);
position:absolute;
top:0;
left:0;
width:100%;
pointer-events:none;
}

.glitchdist-text::before{
color:#ef4444;
z-index:1;
animation:glitchDistTop 2s infinite;
}

.glitchdist-text::after{
color:#22d3ee;
z-index:2;
animation:glitchDistBottom 2s infinite reverse;
}

@keyframes glitchDistTop{
0%,100%{transform:translate(0,0);}
20%{transform:translate(-3px,-2px);}
40%{transform:translate(3px,1px);}
60%{transform:translate(-2px,2px);}
80%{transform:translate(2px,-1px);}
}

@keyframes glitchDistBottom{
0%,100%{transform:translate(0,0);}
20%{transform:translate(3px,2px);}
40%{transform:translate(-3px,-1px);}
60%{transform:translate(2px,-2px);}
80%{transform:translate(-2px,1px);}
}

.glitchdist-text:hover::before{
animation:glitchDistHoverTop .6s infinite;
}

.glitchdist-text:hover::after{
animation:glitchDistHoverBottom .6s infinite;
}

@keyframes glitchDistHoverTop{
0%,100%{transform:translate(-2px,-1px);}
50%{transform:translate(-8px,-4px);}
}

@keyframes glitchDistHoverBottom{
0%,100%{transform:translate(2px,1px);}
50%{transform:translate(8px,4px);}
}

.glitchdist-text:active{
animation:glitchDistShake .28s linear;
}

@keyframes glitchDistShake{
0%{transform:translate(0);}
25%{transform:translate(-5px,3px);}
50%{transform:translate(5px,-3px);}
75%{transform:translate(-3px,2px);}
100%{transform:translate(0);}
}

4. Digital Scan Line Text

Digital Scan Line Text creates a futuristic scanning effect where a glowing light beam moves across the typography.

A digital scan line moves across the text automatically
On hover, the scan becomes faster and brighter
On click, a double scan animation is triggered

Digital Scan Line

<div class="scanline-demo">
<span class="scanline-text">
Digital Scan Line
</span>
</div>

.scanline-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.scanline-text{
position:relative;
display:inline-block;
font-size:36px;
font-weight:800;
color:#ffffff;
letter-spacing:1px;
overflow:hidden;
}

.scanline-text::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:70%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(34,211,238,.15),
rgba(34,211,238,.9),
rgba(34,211,238,.15),
transparent
);
filter:blur(5px);
animation:digitalScanLine 3s linear infinite;
}

@keyframes digitalScanLine{
0%{left:-120%;}
65%{left:120%;}
100%{left:120%;}
}

.scanline-text:hover::before{
animation:digitalScanHover 1.2s linear infinite;
filter:blur(9px);
}

@keyframes digitalScanHover{
0%{left:-120%;}
100%{left:120%;}
}

.scanline-text:active::before{
animation:digitalScanClick .55s linear;
}

@keyframes digitalScanClick{
0%{left:-120%;}
40%{left:120%;}
50%{left:-120%;}
90%{left:120%;}
100%{left:120%;}
}

5. Matrix Rain Text Overlay

Matrix Rain Text Overlay creates a cyber-style text effect where binary code falls over the typography like a digital rain layer.

Binary code falls vertically across the text
On hover, the rain becomes brighter and faster
On click, the overlay flashes like a terminal glitch

Matrix Rain Text

<div class="matrixrain-demo">
<span class="matrixrain-text">
<span>Matrix Rain Text</span>
</span>
</div>

.matrixrain-demo{
padding:80px;
display:flex;
justify-content:center;
background:#000000;
border-radius:12px;
}

.matrixrain-text{
position:relative;
display:inline-block;
font-size:36px;
font-weight:800;
color:#22c55e;
letter-spacing:1px;
text-shadow:
0 0 6px #22c55e,
0 0 18px #16a34a;
overflow:hidden;
}

.matrixrain-text span{
position:relative;
z-index:2;
}

.matrixrain-text::before{
content:"010101001011010101100101";
position:absolute;
left:0;
top:-120%;
width:100%;
height:100%;
color:#86efac;
font-size:16px;
letter-spacing:4px;
line-height:1.1;
opacity:.35;
z-index:1;
animation:matrixRainFall 2.6s linear infinite;
}

.matrixrain-text::after{
content:"101100101001011010101001";
position:absolute;
left:0;
top:-160%;
width:100%;
height:100%;
color:#22c55e;
font-size:13px;
letter-spacing:3px;
line-height:1.1;
opacity:.22;
z-index:1;
animation:matrixRainFallTwo 3.4s linear infinite;
}

@keyframes matrixRainFall{
0%{top:-120%;}
100%{top:120%;}
}

@keyframes matrixRainFallTwo{
0%{top:-160%;}
100%{top:140%;}
}

.matrixrain-text:hover::before{
opacity:.65;
animation:matrixRainHover 1.2s linear infinite;
}

.matrixrain-text:hover::after{
opacity:.45;
animation:matrixRainHoverTwo 1.6s linear infinite;
}

@keyframes matrixRainHover{
0%{top:-120%;}
100%{top:120%;}
}

@keyframes matrixRainHoverTwo{
0%{top:-160%;}
100%{top:140%;}
}

.matrixrain-text:active{
animation:matrixFlash .28s linear;
}

@keyframes matrixFlash{
0%{filter:brightness(1);}
50%{filter:brightness(2.4);}
100%{filter:brightness(1);}
}

6. Animated Gradient Flow Text

Animated Gradient Flow Text creates a smooth moving gradient inside the text for a modern UI effect.

Gradient flows continuously across the text
On hover, animation speeds up
On click, gradient rushes quickly across

Gradient Flow Text

<div class="gradientflow-demo">
<span class="gradientflow-text">
Gradient Flow Text
</span>
</div>

.gradientflow-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.gradientflow-text{
font-size:36px;
font-weight:800;
letter-spacing:1px;
background:linear-gradient(
90deg,
#22c55e,
#06b6d4,
#6366f1,
#22c55e
);
background-size:200% auto;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation:gradientFlow 4s linear infinite;
}

@keyframes gradientFlow{
0%{background-position:0% center;}
100%{background-position:200% center;}
}

.gradientflow-text:hover{
animation:gradientFlowHover 2s linear infinite;
}

.gradientflow-text:active{
animation:gradientRush .6s linear;
}

7. Rainbow Wave Text

Rainbow Wave Text creates a vibrant animated rainbow effect that flows across each letter in a smooth wave motion, giving the text a dynamic and eye-catching look.

Colorful rainbow gradient moves in a wave pattern across the text
Each letter animates with a slight delay for a fluid effect
On hover, the wave becomes faster and more intense

R A I N B O W

<div class="rainbow-demo">
<div class="rainbow-text">
<span style="--d:0s;">R</span>
<span style="--d:.1s;">A</span>
<span style="--d:.2s;">I</span>
<span style="--d:.3s;">N</span>
<span style="--d:.4s;">B</span>
<span style="--d:.5s;">O</span>
<span style="--d:.6s;">W</span>
</div>
</div>

.rainbow-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.rainbow-text span{
display:inline-block;
font-size:36px;
font-weight:800;
animation:rainbowWave 2s ease-in-out infinite;
animation-delay:var(--d);
}

@keyframes rainbowWave{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-10px);}
}

.rainbow-text span:nth-child(1){color:#ef4444;}
.rainbow-text span:nth-child(2){color:#f97316;}
.rainbow-text span:nth-child(3){color:#eab308;}
.rainbow-text span:nth-child(4){color:#22c55e;}
.rainbow-text span:nth-child(5){color:#06b6d4;}
.rainbow-text span:nth-child(6){color:#6366f1;}
.rainbow-text span:nth-child(7){color:#a855f7;}

8. Shimmer Shine Text

Shimmer Shine Text creates a sleek reflective shine that sweeps across the text, simulating a polished metallic or glass-like surface often seen in premium UI designs.

A bright shimmer line moves smoothly across the text
Creates a reflective, glossy surface effect
On hover, the shine becomes faster and more intense

Shimmer Text

<div class="shimmer-demo">
<span class="shimmer-text">
Shimmer Text
</span>
</div>

.shimmer-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.shimmer-text{
position:relative;
font-size:36px;
font-weight:800;
color:#fff;
overflow:hidden;
}

.shimmer-text::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.9),
transparent
);
filter:blur(6px);
animation:shimmerMove 3s infinite;
}

@keyframes shimmerMove{
0%{left:-120%;}
100%{left:120%;}
}

9. Liquid Color Fill Text

Liquid Color Fill Text creates a fluid animation where color fills the text like liquid, producing a smooth and organic visual effect perfect for modern UI designs.

Color fills the text with a smooth liquid-like motion
Creates an organic and dynamic visual effect
On hover, the fill animation becomes faster and more pronounced

Liquid Fill Text

<div class="liquid-demo">
<span class="liquid-text">
Liquid Fill Text
</span>
</div>

.liquid-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.liquid-text{
font-size:36px;
font-weight:800;
color:#fff;
background:linear-gradient(#22c55e,#06b6d4);
background-size:100% 0%;
background-repeat:no-repeat;
background-position:bottom;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation:liquidFill 3s infinite;
}

@keyframes liquidFill{
0%,100%{background-size:100% 0%;}
50%{background-size:100% 100%;}
}

10. Split Color Offset Text

Split Color Offset Text creates a layered text effect where multiple colored copies shift slightly apart, producing a dynamic RGB-style offset commonly used in modern and glitch-inspired UI designs.

Multiple color layers shift slightly to create a split effect
Gives a modern RGB / glitch-style visual appearance
On hover, layers animate and intensify the offset effect

Split Offset

<div class="splitoffset-demo">
<span class="splitoffset-text" data-text="Split Offset">
Split Offset
</span>
</div>

.splitoffset-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.splitoffset-text{
position:relative;
font-size:36px;
font-weight:800;
color:#fff;
}

.splitoffset-text::before,
.splitoffset-text::after{
content:attr(data-text);
position:absolute;
left:0;
top:0;
}

.splitoffset-text::before{
color:#22d3ee;
transform:translate(-3px,-2px);
}

.splitoffset-text::after{
color:#f472b6;
transform:translate(3px,2px);
}

.splitoffset-text:hover::before,
.splitoffset-text:hover::after{
transform:translate(0,0);
}

11. Hover Lift Text (3D Pop)

Hover Lift Text (3D Pop) creates a dynamic 3D effect where the text visually lifts off the surface on hover, giving it depth and a modern interactive feel.

Text lifts upward creating a 3D pop effect
Shadow and depth increase to enhance realism
On hover, movement becomes smooth and responsive

3D Hover Text

<div class="lift-demo">
<span class="lift-text">
3D Hover Text
</span>
</div>

.lift-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
perspective:800px;
border-radius:12px;
}

.lift-text{
font-size:40px;
font-weight:800;
color:#fff;
transform-style:preserve-3d;
transition:all .35s ease;
text-shadow:0 2px 0 #111;
}

.lift-text:hover{
transform:
rotateX(12deg)
rotateY(-12deg)
translateZ(40px)
scale(1.1);

text-shadow:
0 10px 20px rgba(0,0,0,.5),
0 0 25px rgba(34,211,238,.4);
}

.lift-text:active{
transform:
rotateX(0)
rotateY(0)
translateZ(0)
scale(.95);
}

12. Underline Slide Animation

Underline Slide Animation creates a sleek effect where an underline smoothly slides across the text, enhancing interaction and drawing attention to clickable elements.

Underline animates smoothly from one side to the other
Creates a clean and modern interactive effect
On hover, the animation becomes faster and more pronounced

Slide Underline

<span class="slide-text">
Slide Underline
</span>

.slide-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.slide-text{
position:relative;
font-size:36px;
font-weight:800;
color:#fff;
text-decoration:none;
}

.slide-text::after{
content:"";
position:absolute;
left:-100%;
bottom:-6px;
width:100%;
height:3px;
background:linear-gradient(90deg,#22d3ee,#6366f1);
transition:.5s ease;
}

.slide-text:hover::after{
left:0;
}

.slide-text:active::after{
background:#fff;
}

13. Text Flip on Hover

Text Flip on Hover creates a 3D flipping animation where the text rotates to reveal an alternate version, adding depth and interactivity to modern UI elements.

Text flips in 3D space to reveal alternate content
Creates a dynamic and interactive visual effect
On hover, the flip animation becomes smooth and responsive

Flip Text Flip Text Activated

<div class="flip-wrap">
<span class="flip-front">Flip Text</span>
<span class="flip-back">Activated</span>
</div>

.flip-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
perspective:900px;
border-radius:12px;
}

.flip-wrap{
position:relative;
display:inline-block;
font-size:36px;
font-weight:800;
color:#fff;
transform-style:preserve-3d;
transition:transform .6s;
}

.flip-front,
.flip-back{
position:absolute;
left:0;
top:0;
backface-visibility:hidden;
}

.flip-back{
transform:rotateX(180deg);
color:#22d3ee;
}

.flip-wrap:hover{
transform:rotateX(180deg);
}

.flip-spacer{
visibility:hidden;
}

14. Text Zoom & Blur Hover

Text Zoom & Blur Hover creates a cinematic effect where the text zooms forward while background layers blur, producing a strong depth and focus transition.

Text smoothly scales up to create a zoom effect
Background or shadow layers blur for depth illusion
On hover, the transition becomes more intense and focused

Zoom Blur Text

<span class="zoom-text">
Zoom Blur Text
</span>

.zoom-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.zoom-text{
font-size:36px;
font-weight:800;
color:#fff;
transition:.4s ease;
}

.zoom-text:hover{
transform:scale(1.4);
filter:blur(2px);
opacity:.6;
}

.zoom-text:active{
transform:scale(0.9);
filter:none;
opacity:1;
}

15. Magnetic Hover Text

Magnetic Hover Text creates an interactive effect where the text appears to be attracted to the cursor, simulating a magnetic pull for a highly engaging UI experience.

Text subtly moves toward the cursor like a magnetic force
Creates a playful and interactive user experience
On hover, movement becomes stronger and more responsive

Magnetic Text

<div class="magnetic-demo">
<span class="magnetic-text">
Magnetic Text
</span>
</div>

.magnetic-demo{
padding:120px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.magnetic-text{
font-size:40px;
font-weight:800;
color:#fff;
position:relative;
transition:.2s ease;
}

.magnetic-demo:hover .magnetic-text{
transform:translate(
calc((var(--x,0) - 50px)/5),
calc((var(--y,0) - 50px)/5)
);
}

.magnetic-demo{
cursor:pointer;
}

.magnetic-demo:hover{
--x:60px;
--y:40px;
}

.magnetic-text:active{
transform:scale(.9);
}

16. Letter Wave Animation

Letter Wave Animation creates a flowing motion where each letter moves in a wave pattern, giving the text a dynamic and rhythmic visual effect.

Each letter animates with a slight delay to form a wave
Creates smooth and continuous motion across the text
On hover, the wave becomes faster and more pronounced

WAVE TEXT

<div class="wave-text">
<span>W</span><span>A</span>...
</div>

.wave-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.wave-text span{
display:inline-block;
font-size:36px;
font-weight:800;
color:#22d3ee;
animation:wave 1.5s infinite;
}

.wave-text span:nth-child(1){animation-delay:0s;}
.wave-text span:nth-child(2){animation-delay:.1s;}
.wave-text span:nth-child(3){animation-delay:.2s;}
.wave-text span:nth-child(4){animation-delay:.3s;}
.wave-text span:nth-child(5){animation-delay:.4s;}
.wave-text span:nth-child(6){animation-delay:.5s;}
.wave-text span:nth-child(7){animation-delay:.6s;}
.wave-text span:nth-child(8){animation-delay:.7s;}

@keyframes wave{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-20px);}
}

17. Floating Drift Text

Floating Drift Text creates a smooth drifting motion where the text gently floats as if suspended in air, adding a soft and modern UI feel.

Text moves slowly in a floating, drifting motion
Creates a calm and atmospheric visual effect
On hover, movement becomes more controlled and subtle

Floating Text

<span class="float-text">
Floating Text
</span>

.float-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.float-text{
font-size:36px;
font-weight:800;
color:#fff;
animation:float 6s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-25px);}
100%{transform:translateY(0);}
}

18. Bounce Pulse Text

Bounce Pulse Text creates an energetic animation where the text bounces and pulses rhythmically, making it feel alive and attention-grabbing.

Text performs a subtle bounce combined with a pulse effect
Creates a lively and dynamic visual interaction
On hover, the motion intensifies for stronger emphasis

Bounce Pulse

<span class="bounce-text">
Bounce Pulse
</span>

.bounce-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.bounce-text{
font-size:36px;
font-weight:800;
color:#facc15;
animation:bouncePulse 1.2s infinite;
}

@keyframes bouncePulse{
0%{transform:scale(1) translateY(0);}
30%{transform:scale(1.2) translateY(-20px);}
60%{transform:scale(.9) translateY(5px);}
100%{transform:scale(1) translateY(0);}
}

19. Rotating 3D Text

Rotating 3D Text creates a depth-based animation where the text rotates in 3D space, delivering a bold and immersive visual effect.

Text rotates along a 3D axis for depth illusion
Creates a modern and immersive UI effect
On hover, rotation becomes faster and more pronounced

3D ROTATE

<span class="rotate-text">
3D ROTATE
</span>

.rotate-demo{
padding:120px;
display:flex;
justify-content:center;
background:#020617;
perspective:1000px;
border-radius:12px;
}

.rotate-text{
font-size:40px;
font-weight:800;
color:#22d3ee;
transform-style:preserve-3d;
animation:spin3d 5s linear infinite;
}

@keyframes spin3d{
0%{transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}

20. Elastic Stretch Text

Elastic Stretch Text creates a flexible animation where the text stretches and snaps back like elastic, producing a smooth and responsive visual effect.

Text stretches horizontally and vertically with elastic motion
Creates a soft bounce-back effect for realism
On hover, the stretch becomes stronger and more dynamic

Elastic Text

<span class="elastic-text">
Elastic Text
</span>

.elastic-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.elastic-text{
font-size:36px;
font-weight:800;
color:#f472b6;
display:inline-block;
animation:elastic 2s infinite;
}

@keyframes elastic{
0%{transform:scaleX(1);}
30%{transform:scaleX(1.4);}
60%{transform:scaleX(.8);}
100%{transform:scaleX(1);}
}

21. Broken Pixel Text (Scatter)

Broken Pixel Text creates a digital scatter effect where the text splits into distorted pixel-like layers.

Text splits into broken digital layers
On hover, the scatter becomes stronger
On click, the text snaps with a fast glitch burst

Pixel Break

<div class="pixel-demo">
<span class="pixel-text" data-text="Pixel Break">
<span>Pixel Break</span>
</span>
</div>

.pixel-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
overflow:hidden;
}

.pixel-text{
position:relative;
display:inline-block;
font-size:42px;
font-weight:900;
color:#ffffff;
letter-spacing:2px;
text-transform:uppercase;
}

.pixel-text span{
position:relative;
z-index:3;
}

.pixel-text::before,
.pixel-text::after{
content:attr(data-text);
position:absolute;
left:0;
top:0;
width:100%;
pointer-events:none;
overflow:hidden;
}

.pixel-text::before{
color:#22c55e;
z-index:1;
clip-path:polygon(0 0,100% 0,100% 45%,0 45%);
animation:pixelScatterTop 3s ease-in-out infinite;
}

.pixel-text::after{
color:#06b6d4;
z-index:2;
clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);
animation:pixelScatterBottom 3s ease-in-out infinite;
}

@keyframes pixelScatterTop{
0%,100%{
transform:translate(0,0);
opacity:.85;
}
20%{
transform:translate(-8px,-5px);
opacity:.65;
}
40%{
transform:translate(10px,-7px);
opacity:.45;
}
60%{
transform:translate(-5px,-3px);
opacity:.75;
}
}

@keyframes pixelScatterBottom{
0%,100%{
transform:translate(0,0);
opacity:.85;
}
20%{
transform:translate(8px,5px);
opacity:.65;
}
40%{
transform:translate(-10px,7px);
opacity:.45;
}
60%{
transform:translate(5px,3px);
opacity:.75;
}
}

.pixel-text:hover::before{
animation:pixelScatterHoverTop .7s ease-in-out infinite;
}

.pixel-text:hover::after{
animation:pixelScatterHoverBottom .7s ease-in-out infinite;
}

@keyframes pixelScatterHoverTop{
0%,100%{transform:translate(-4px,-2px);}
50%{transform:translate(-18px,-10px);}
}

@keyframes pixelScatterHoverBottom{
0%,100%{transform:translate(4px,2px);}
50%{transform:translate(18px,10px);}
}

.pixel-text:active{
animation:pixelSnap .28s linear;
}

@keyframes pixelSnap{
0%{transform:scale(1);}
50%{transform:scale(.95) skewX(-8deg);}
100%{transform:scale(1);}
}

22. Smoke Dissolve Text

Smoke Dissolve Text creates a soft cinematic dissolve where the text blurs, fades, and returns like smoke.

Text dissolves into a smoky blur automatically
On hover, the dissolve becomes slower and more dramatic
On click, the text quickly fades and reforms

Smoke Text

<div class="smoke-demo">
<span class="smoke-text" data-text="Smoke Text">
Smoke Text
</span>
</div>

.smoke-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
overflow:hidden;
}

.smoke-text{
position:relative;
display:inline-block;
font-size:42px;
font-weight:900;
color:#ffffff;
letter-spacing:2px;
text-transform:uppercase;
animation:smokeDissolve 4s ease-in-out infinite;
}

.smoke-text::before{
content:attr(data-text);
position:absolute;
left:0;
top:0;
width:100%;
color:rgba(255,255,255,.45);
filter:blur(12px);
opacity:.45;
z-index:-1;
animation:smokeGhost 4s ease-in-out infinite;
}

@keyframes smokeDissolve{
0%,100%{
filter:blur(0);
opacity:1;
transform:translateY(0) scale(1);
letter-spacing:2px;
}
50%{
filter:blur(8px);
opacity:.42;
transform:translateY(-8px) scale(1.08);
letter-spacing:8px;
}
}

@keyframes smokeGhost{
0%,100%{
transform:translateY(0) scale(1);
opacity:.2;
}
50%{
transform:translateY(-18px) scale(1.2);
opacity:.7;
}
}

.smoke-text:hover{
animation:smokeDissolveHover 5s ease-in-out infinite;
}

@keyframes smokeDissolveHover{
0%,100%{
filter:blur(0);
opacity:1;
transform:translateY(0) scale(1);
}
50%{
filter:blur(14px);
opacity:.3;
transform:translateY(-16px) scale(1.15);
}
}

.smoke-text:active{
animation:smokeClick .35s ease;
}

@keyframes smokeClick{
0%{filter:blur(0);opacity:1;}
50%{filter:blur(18px);opacity:.1;}
100%{filter:blur(0);opacity:1;}
}

23. Fire Glow Text Effect

Fire Glow Text Effect creates a hot flame-inspired glow with flickering orange and red shadows.

Text glows with a layered fire effect
On hover, the flame becomes brighter and taller
On click, a short heat burst animation is triggered

Fire Glow

<div class="fire-demo">
<span class="fire-text" data-text="Fire Glow">
Fire Glow
</span>
</div>

.fire-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
overflow:hidden;
}

.fire-text{
position:relative;
display:inline-block;
font-size:44px;
font-weight:900;
letter-spacing:2px;
text-transform:uppercase;
color:#fff7ed;
text-shadow:
0 0 6px #fed7aa,
0 0 16px #fb923c,
0 0 34px #f97316,
0 0 70px #dc2626;
animation:fireFlicker 1.6s ease-in-out infinite;
}

.fire-text::before{
content:attr(data-text);
position:absolute;
left:0;
top:0;
width:100%;
color:#fb923c;
filter:blur(10px);
opacity:.8;
z-index:-1;
animation:fireHeat 1.2s ease-in-out infinite;
}

@keyframes fireFlicker{
0%,100%{
transform:translateY(0) scale(1);
text-shadow:
0 0 6px #fed7aa,
0 0 16px #fb923c,
0 0 34px #f97316,
0 0 70px #dc2626;
}
35%{
transform:translateY(-2px) scale(1.02);
text-shadow:
0 0 8px #fff7ed,
0 0 22px #fdba74,
0 0 50px #f97316,
0 0 95px #b91c1c;
}
70%{
transform:translateY(1px) scale(.99);
text-shadow:
0 0 5px #fed7aa,
0 0 14px #fb923c,
0 0 28px #ea580c,
0 0 60px #991b1b;
}
}

@keyframes fireHeat{
0%,100%{
transform:translateY(0) scale(1);
opacity:.55;
}
50%{
transform:translateY(-10px) scale(1.14);
opacity:.95;
}
}

.fire-text:hover{
animation:fireHover .9s ease-in-out infinite;
}

@keyframes fireHover{
0%,100%{transform:translateY(0) scale(1);}
50%{transform:translateY(-5px) scale(1.08);}
}

.fire-text:active{
animation:fireBurst .3s ease;
}

@keyframes fireBurst{
0%{filter:brightness(1);}
50%{filter:brightness(2.2);}
100%{filter:brightness(1);}
}

24. Shadow Depth Moving Text

Shadow Depth Moving Text creates a premium dimensional effect where the shadow moves like a dynamic light source.

Text shadow moves continuously to create depth
On hover, the depth becomes stronger and more dramatic
On click, the text compresses like a physical object

Depth Text

<div class="depth-demo">
<span class="depth-text">
Depth Text
</span>
</div>

.depth-demo{
padding:100px;
display:flex;
justify-content:center;
background:#f8fafc;
border-radius:12px;
overflow:hidden;
}

.depth-text{
display:inline-block;
font-size:44px;
font-weight:900;
letter-spacing:1px;
text-transform:uppercase;
color:#111827;
text-shadow:
3px 3px 0 rgba(0,0,0,.18),
8px 8px 18px rgba(0,0,0,.18);
animation:depthMove 4s ease-in-out infinite;
}

@keyframes depthMove{
0%,100%{
transform:translate(0,0);
text-shadow:
3px 3px 0 rgba(0,0,0,.18),
8px 8px 18px rgba(0,0,0,.18);
}
25%{
transform:translate(-2px,-2px);
text-shadow:
8px 5px 0 rgba(0,0,0,.16),
18px 12px 25px rgba(0,0,0,.24);
}
50%{
transform:translate(0,-4px);
text-shadow:
4px 14px 0 rgba(0,0,0,.14),
12px 28px 35px rgba(0,0,0,.30);
}
75%{
transform:translate(2px,-2px);
text-shadow:
-6px 8px 0 rgba(0,0,0,.16),
-16px 18px 30px rgba(0,0,0,.26);
}
}

.depth-text:hover{
animation:depthHover 1.5s ease-in-out infinite;
}

@keyframes depthHover{
0%,100%{
transform:translateY(0);
text-shadow:
5px 5px 0 rgba(0,0,0,.2),
15px 15px 25px rgba(0,0,0,.25);
}
50%{
transform:translateY(-8px);
text-shadow:
12px 24px 0 rgba(0,0,0,.12),
28px 42px 45px rgba(0,0,0,.38);
}
}

.depth-text:active{
animation:depthClick .3s ease;
}

@keyframes depthClick{
0%{transform:scale(1);}
50%{transform:scale(.94) translateY(6px);}
100%{transform:scale(1);}
}

25. Orbiting Particles Text

Orbiting Particles Text creates a futuristic particle system where glowing dots orbit around the text.

Multiple particles orbit around the text automatically
On hover, the particles move faster and glow brighter
On click, the text and particles trigger a pulse burst

Orbit Text

<div class="orbitparticles-demo">
<div class="orbitparticles-wrap">
<span class="orbitparticles-dot"></span>
<span class="orbitparticles-dot"></span>
<span class="orbitparticles-dot"></span>
<span class="orbitparticles-dot"></span>
<span class="orbitparticles-text">Orbit Text</span>
</div>
</div>

.orbitparticles-demo{
padding:120px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
overflow:hidden;
}

.orbitparticles-wrap{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
padding:42px 70px;
}

.orbitparticles-text{
position:relative;
z-index:3;
font-size:42px;
font-weight:900;
letter-spacing:2px;
text-transform:uppercase;
color:#ffffff;
text-shadow:
0 0 8px rgba(34,211,238,.75),
0 0 24px rgba(6,182,212,.45);
}

.orbitparticles-dot{
position:absolute;
left:50%;
top:50%;
width:9px;
height:9px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 10px #22c55e,
0 0 22px #22c55e;
transform-origin:0 0;
animation:orbitParticleOne 3.6s linear infinite;
}

.orbitparticles-dot:nth-child(2){
background:#22d3ee;
box-shadow:
0 0 10px #22d3ee,
0 0 22px #22d3ee;
animation:orbitParticleTwo 4.2s linear infinite;
}

.orbitparticles-dot:nth-child(3){
background:#a855f7;
box-shadow:
0 0 10px #a855f7,
0 0 22px #a855f7;
animation:orbitParticleThree 4.8s linear infinite;
}

.orbitparticles-dot:nth-child(4){
background:#f472b6;
box-shadow:
0 0 10px #f472b6,
0 0 22px #f472b6;
animation:orbitParticleFour 5.2s linear infinite;
}

@keyframes orbitParticleOne{
0%{transform:rotate(0deg) translateX(115px) rotate(0deg);}
100%{transform:rotate(360deg) translateX(115px) rotate(-360deg);}
}

@keyframes orbitParticleTwo{
0%{transform:rotate(90deg) translateX(95px) rotate(-90deg);}
100%{transform:rotate(450deg) translateX(95px) rotate(-450deg);}
}

@keyframes orbitParticleThree{
0%{transform:rotate(180deg) translateX(125px) rotate(-180deg);}
100%{transform:rotate(540deg) translateX(125px) rotate(-540deg);}
}

@keyframes orbitParticleFour{
0%{transform:rotate(270deg) translateX(105px) rotate(-270deg);}
100%{transform:rotate(630deg) translateX(105px) rotate(-630deg);}
}

.orbitparticles-wrap:hover .orbitparticles-dot{
animation-duration:1.6s;
filter:brightness(1.4);
}

.orbitparticles-wrap:active{
animation:orbitPulse .35s ease;
}

@keyframes orbitPulse{
0%{transform:scale(1);}
50%{transform:scale(1.08);}
100%{transform:scale(1);}
}

26. Typewriter Loop Text

Typewriter Loop Text simulates a continuous typing animation where text is written, paused, and erased in a loop.

Text types out character by character
Loops continuously with pause
Includes blinking cursor effect

Typewriter Loop Text

<span class="type-loop-text">
Typewriter Loop Text
</span>

.type-loop-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.type-loop-text{
font-size:36px;
font-weight:800;
color:#22d3ee;
white-space:nowrap;
overflow:hidden;
border-right:3px solid #22d3ee;
width:0;
animation:
typingLoop 5s steps(22,end) infinite,
cursorBlink 1s step-end infinite;
}

@keyframes typingLoop{
0%{width:0;}
40%{width:100%;}
60%{width:100%;}
100%{width:0;}
}

@keyframes cursorBlink{
0%,100%{border-color:#22d3ee;}
50%{border-color:transparent;}
}

27. Erasing & Rewriting Text

Erasing & Rewriting Text creates a realistic delete-and-retype animation for dynamic text content.

Text deletes fully and rewrites
Smooth timing transitions
Ideal for hero sections

Rewriting Text Effect

<span class="erase-text">
Rewriting Text Effect
</span>

.erase-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.erase-text{
font-size:36px;
font-weight:800;
color:#fff;
overflow:hidden;
white-space:nowrap;
border-right:3px solid #fff;
animation:
eraseWrite 6s steps(20,end) infinite,
cursorBlink 1s infinite;
}

@keyframes eraseWrite{
0%{width:0;}
30%{width:100%;}
50%{width:100%;}
80%{width:0;}
100%{width:0;}
}

28. Cursor Blink Animated Text

Cursor Blink Animated Text creates a simple but modern typing cursor effect for static text.

Classic blinking cursor
Lightweight effect
Perfect for minimal UI

Cursor Text

<span class="cursor-text">
Cursor Text
</span>

.cursor-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.cursor-text{
font-size:36px;
font-weight:800;
color:#22c55e;
position:relative;
}

.cursor-text::after{
content:"|";
margin-left:5px;
animation:blink 1s infinite;
}

@keyframes blink{
0%,100%{opacity:1;}
50%{opacity:0;}
}

29. Handwriting Stroke Animation

Handwriting Stroke Animation simulates text being drawn like handwriting using stroke animation.

SVG stroke animation
Realistic handwriting feel
Perfect for branding

<svg>
<text class="hand-text">Handwriting</text>
</svg>

.hand-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}

.hand-text{
stroke:#22d3ee;
stroke-width:2;
fill:none;
stroke-dasharray:400;
stroke-dashoffset:400;
animation:write 4s linear infinite;
}

@keyframes write{
0%{stroke-dashoffset:400;}
100%{stroke-dashoffset:0;}
}

30. Text Reveal from Left

Text Reveal from Left creates a clean cinematic reveal animation where text slides in from the left.

Smooth left-to-right reveal
Modern minimal effect
Perfect for headlines

Reveal Text

<span class="reveal-text">
Reveal Text
</span>

.reveal-demo{
padding:100px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
overflow:hidden;
}

.reveal-text{
font-size:42px;
font-weight:900;
color:#fff;
transform:translateX(-100%);
opacity:0;
animation:reveal 2s ease forwards infinite;
}

@keyframes reveal{
0%{
transform:translateX(-100%);
opacity:0;
}
100%{
transform:translateX(0);
opacity:1;
}
}

If you’re interested in more CSS animations and UI effects, also check out:

Want These Text Effects on Your Website?

If you want to implement modern CSS text animations, advanced typography effects, or interactive UI elements on your website, we can design, build, and integrate them for you.

View our website update service

Best Practices for Using CSS Text Effects

While CSS text effects can dramatically improve the visual impact of your website, they should always be used with intention. The goal is not to overload the interface with animations, but to enhance readability, guide user attention, and improve interaction.

Well-designed animated text should feel natural, responsive, and consistent with your overall UI design. Poorly executed effects can reduce clarity, distract users, and negatively impact usability.

When implementing CSS text animations, follow these best practices:

use text effects to highlight important elements only
avoid excessive animation across the entire page
keep animations smooth and short
ensure text remains readable at all times
maintain consistency across your UI
test effects on desktop and mobile devices
avoid effects that reduce contrast or clarity
prioritize usability over visual complexity

In modern UI design, subtle and well-timed animations often outperform aggressive effects. Small details can create a premium feel without overwhelming the user.

Performance tip

Need a fast environment to test CSS animations?

To properly test CSS text animations and UI effects, you need fast hosting, staging environments, and reliable performance tools. This is especially important for developers building modern interfaces.

Explore Kinsta Hosting

FAQ – CSS Text Effects

What are CSS text effects?

CSS text effects are visual animations and transformations applied to text using only HTML and CSS. These include gradients, motion, glow effects, distortions, and interactive hover or click responses.

Do CSS text effects require JavaScript?

No. Most modern text animations can be created using pure CSS with keyframes, transforms, gradients, and pseudo-elements, making them lightweight and fast.

Are animated text effects good for SEO?

Yes, when used properly. CSS text effects can increase engagement and interaction, which supports SEO signals. However, readability and accessibility must always be maintained.

Do text effects work on mobile devices?

Yes. While hover behaves differently on mobile, most animations still work. It is important to ensure text remains visible and readable without interaction.

What CSS techniques are used for text effects?

Common techniques include transform, opacity, keyframes, gradients, text-shadow, clip-path, and pseudo-elements. Combining these allows for advanced visual effects.

Do CSS animations affect performance?

When optimized correctly, CSS animations have minimal impact. Using GPU-accelerated properties like transform and opacity ensures smooth performance.

Where can text effects be used?

Text effects are commonly used in hero sections, landing pages, CTA elements, SaaS interfaces, portfolios, and product highlights.

How to choose the right text effect?

Choose effects based on your design style. Minimalist designs benefit from subtle motion, while modern or tech-focused sites can use more advanced animations.

Conclusion

CSS text effects have become a key element of modern web design. They transform simple typography into interactive, engaging UI components that guide user attention and improve overall experience.

In this guide, we explored 30 modern CSS text effects built entirely with HTML and CSS. These examples demonstrate how powerful CSS has become for creating advanced UI without relying on JavaScript.

Whether you’re building a portfolio, SaaS product, landing page, or eCommerce website, animated text can elevate your design and create a premium feel.

The key is to use text effects strategically — focusing on clarity, usability, and consistency.

Experiment with different styles, combine techniques, and tailor animations to match your brand identity and user experience goals.

Developer note

Looking for a faster workflow when building UI effects?

If you build modern interfaces, test animations, or work with WordPress projects, having a fast and stable environment makes a huge difference.

View Kinsta Hosting

30 Modern CSS Text Effects – Animated Typography, Hover Effects & UI Animations (2026)

Table of Contents