Add visual flair to text with shadows, decorations, and special effects
Text effects are CSS properties that add visual enhancements to text beyond basic styling. They include shadows, underlines, outlines, and overflow handling. Used thoughtfully, text effects can emphasize content and improve visual appeal.
Key Principle: Use text effects to enhance readability and draw attention, not to distract.
Adds shadow effects to text.
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
Syntax: horizontal vertical blur color
Multiple shadows: Comma-separated list
Example: text-shadow: 1px 1px 2px black, 0 0 25px blue;
Adds lines to text (underline, overline, line-through).
text-decoration: underline;text-decoration: line-through red wavy;
Values: none, underline, overline, line-through
Extended syntax: line style color
Styles: solid, dotted, dashed, wavy, double
Sets the color of text decoration lines.
text-decoration-color: red;
Use: Different color for underline than text
Controls the thickness of decoration lines.
text-decoration-thickness: 3px;
Values: auto, from-font, length (px, em)
Controls how overflowing text is displayed.
text-overflow: ellipsis;
Values: clip (cut off), ellipsis (...)
Requires: white-space: nowrap; and overflow: hidden;
Controls how whitespace and line breaks are handled.
white-space: nowrap;
Values: normal, nowrap, pre, pre-wrap, pre-line
nowrap: Prevents text from wrapping to new line
pre: Preserves whitespace like <pre> element
Allows long words to break and wrap onto the next line.
overflow-wrap: break-word;
Values: normal, break-word, anywhere
Use: Prevents long URLs or words from breaking layout
Indents the first line of text in a block.
text-indent: 2em;
Common use: Paragraph indentation
Negative values: Creates hanging indent
Adds an outline to text characters (webkit browsers).
-webkit-text-stroke: 2px black;
Syntax: width color
Note: Vendor-prefixed, may not work in all browsers