41 CSS Text Effects

CSS Text Effects enhance typography by adding visual interest, interactivity, and animation to your content - without needing JavaScript. From simple bold or italic styling to advanced effects like animated gradients, typewriter animations, and glowing neon shadows, CSS lets you transform plain text into dynamic design elements.

Bold / Italic / Underline / Uppercase

Basic text styling properties

Letter Spacing

Control spacing between letters

Line Height Adjustment

Control vertical spacing between lines

Text Alignment

Different text alignment options

Text Indent

Indent the first line of text

Word Wrap / Break / Ellipsis

Control how text wraps and breaks

Gradient Text

Text with gradient color effects

Multi-color Text

Different colors for different parts of text

Text with Background Clip

Text clipped to show background image

Transparent Text with Background Image

Transparent text revealing background

Animated Gradient Text

Text with moving gradient animation

Simple Text Shadow

Basic text shadow effects

Multi-layered Shadow

Multiple shadow layers for depth

Neon Glow Text

Bright neon glow effect

Soft Glow

Subtle soft glow effect

Shadow on Hover Only

Shadow appears only on hover

Outer vs Inner Shadow Effect

Comparison of outer and inner shadows

Typing / Typewriter Effect

Animated typing effect

Flickering Text

Text with flickering animation

Slide In Text

Text sliding in from different directions

Fade In / Fade Out

Text fading animations

Scale Up / Down

Text scaling animations

Rotate Text

Text rotation animation

Wave Text Animation

Letters moving in wave pattern

Pulse or Bounce Text

Text with pulsing and bouncing effects

3D Text

3D text effect using transform and shadow

Outlined / Stroke Text

Text with outline stroke effect

Blurred Text

Text with blur effects

Cut-out / Hollow Text

Text with cut-out effect

Text Masked by Image

Text with image mask effect

Broken Text Effect

Text with broken/glitch effect

Vertical Writing

Vertical text orientation

Split Text on Hover

Text splits apart on hover

Mirrored / Reflected Text

Text with mirror reflection effect

Gradient Border Around Text

Text with gradient border effect

Color Change on Hover

Text color changes on hover

Underline Reveal from Left to Right

Underline animates from left to right

Stroke Fill on Hover

Text stroke fills with color on hover

Letter-by-letter Animation

Each letter animates individually on hover

Expand Letter Spacing on Hover

Letter spacing expands on hover

Word-by-word Animation Delay

Each word animates with delay