Loading...

CSS Text Effects

You can already align, decorate, and load fonts. Text effects add polish on top — a soft shadow, an ellipsis when space is tight, or a wrap for awkward long strings. Keep them light so words stay easy to read.

A small effects toolkit

📊 Text effects at a glance

Tool Everyday job
text-shadow Soft depth or glow behind glyphs (offset, blur, color)
text-overflow How clipped text ends — often ellipsis (…)
overflow + white-space Partners ellipsis needs (hidden + nowrap)
overflow-wrap Break long words/URLs so they fit the box
writing-mode Run text in another direction (e.g. vertical)

Effects are seasoning, not the meal. A heading may enjoy a quiet shadow; a long paragraph rarely needs fireworks.

text-shadow — offset, blur, color

Order is usually horizontal offset, vertical offset, blur radius, then color. Small values feel calm; huge blur can muddy the letters.

Basic text-shadow

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Layered shadows

You can list more than one shadow, separated by commas — useful for a soft lift without a harsh outline.

Two soft layers

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

Ellipsis when text is too wide

text-overflow: ellipsis only works with a clipping setup: typically overflow: hidden and white-space: nowrap on a box with a limited width.

Ellipsis on a narrow label

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — tame long words

A long URL or unbroken string can blow out a narrow column. overflow-wrap: break-word (or the older alias word-wrap) lets the browser break inside the word when needed.

Break long strings

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — a vertical peek

writing-mode changes how lines progress. Vertical values are handy for side labels or decorative titles — not for everyday paragraphs.

Vertical text peek

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

A calm heading habit

One soft shadow on a short title is often enough. Skip heavy glow on body copy, and prefer ellipsis only where space is truly limited.

Light title polish

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

Try it yourself

  1. Add a soft text-shadow to a heading (small offsets, modest blur).
  2. Stack a second lighter shadow with a comma.
  3. Build an ellipsis label: max-width, overflow: hidden, white-space: nowrap, text-overflow: ellipsis.
  4. Put a long URL in a narrow box and set overflow-wrap: break-word.
  5. Try writing-mode: vertical-rl on a short side label — then switch back for normal reading.

Common mistakes

  • Neon multi-shadows on long paragraphs (hard to read)
  • Setting text-overflow: ellipsis without overflow: hidden and nowrap
  • Breaking every word with aggressive word-break when overflow-wrap would do
  • Using vertical writing-mode for whole articles
  • Mixing this lesson with @font-face / web-font loading (that was the previous session)

Summary

  • text-shadow uses offset, blur, and color — keep values modest
  • Multiple shadows can layer for a soft lift
  • Ellipsis needs overflow, white-space: nowrap, and a width limit
  • overflow-wrap helps long words and URLs fit
  • writing-mode is a specialty tool; everyday body text stays horizontal

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 29 of 35
Css Tutorial