CSS Text Effects - Detailed Overview

Introduction to Text Effects

CSS provides a variety of text effects to enhance and customize the appearance of text on web pages. Common text effects include:

• Text Shadow
• Text Transform
• Text Overflow
• Letter Spacing
• Line Height
• Word Spacing
• Text Decoration
• Text Align
• Text Gradient

Text Shadow

The text-shadow property adds shadow effects to text. You can adjust the shadow's offset, blur, and color.

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

Text Transform

The text-transform property controls the capitalization of text.

text-transform: uppercase;

Text Overflow

The text-overflow property handles overflowed text in a block container.

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

Letter Spacing

The letter-spacing property controls the space between characters in text.

letter-spacing: 2px;

Line Height

The line-height property controls the spacing between lines of text.

line-height: 1.5;

Word Spacing

The word-spacing property controls the space between words in text.

word-spacing: 4px;

Text Decoration

The text-decoration property adds decoration to text such as underline, overline, or line-through.

text-decoration: underline;

Text Align

The text-align property sets the horizontal alignment of text.

text-align: center;

Text Gradient

The background-clip: text; and -webkit-background-clip: text; properties can be used to create text gradients. Note that -webkit-background-clip: text; is currently supported only in WebKit browsers.

background: linear-gradient(to right, #ff7e5f, #feb47b); -webkit-background-clip: text; -webkit-text-fill-color: transparent;