✨ Advanced Text Effects
Creative CSS text styling and animation techniques
1. Gradient Text
background: #2563eb;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
2. Animated Gradient Text
background: #2563eb;
background-size: 300% auto;
animation: gradientFlow 3s linear infinite;
3. Neon Glow Effect
text-shadow:
0 0 10px #00f3ff,
0 0 20px #00f3ff,
0 0 30px #00f3ff,
0 0 40px #00f3ff;
4. 3D Text Effect
text-shadow:
1px 1px 0 #2563eb,
2px 2px 0 #2563eb,
3px 3px 0 #2563eb,
/* ... multiple layers ... */
9px 9px 10px rgba(0, 0, 0, 0.5);
5. Glitch Effect
/* Uses ::before and ::after pseudo-elements with clip animation */
text-shadow: -2px 0 #ff00de; /* before */
text-shadow: -2px 0 #00fff9; /* after */
6. Text Stroke/Outline (Hover)
color: transparent;
-webkit-text-stroke: 2px #fff;
text-stroke: 2px #fff;
7. Typewriter Effect
white-space: nowrap;
overflow: hidden;
border-right: 3px solid #2563eb;
animation: typing 4s steps(40), blink 0.75s step-end infinite;
8. Rainbow Gradient
background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00,
#00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
animation: rainbowFlow 2s linear infinite;
9. Split Color Text
background: #2563eb);
10. Wavy Text Animation
/* Each letter is a span with staggered animation delay */
animation: wave 1.5s ease-in-out infinite;
11-13. Animated Underlines
Slide Underline
Grow Underline
Rainbow Underline
/* ::after pseudo-element with width/transform transitions */
transition: width 0.4s ease; /* slide */
transform: scaleX(0); /* grow */
background: linear-gradient(...); /* rainbow */
14. Multiline Gradient
Beautiful gradient text that flows across multiple lines with seamless color transitions throughout the entire paragraph.
15. Chrome/Metallic Text
background: linear-gradient(180deg, #fff 0%, #999 50%, #fff 100%);
/* Layered with blurred duplicate for depth */