iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

CSS Text Effects

By · Reviewed & last updated · Part of CSS Tutorial

Beyond color and font, CSS offers a small palette of effects that turn ordinary text into headlines, callouts, and decorative type.

Effect properties

PropertyEffect
text-shadowDrop shadow, glow, or layered outline.
-webkit-text-strokeOutline a glyph (Safari + Chrome).
background-clip: text + color: transparentGradient or image-filled text.
writing-mode: vertical-rlVertical text for sidebars or labels.
text-overflow: ellipsisTruncate long strings with "…".
-webkit-line-clampCap a paragraph to N lines.
letter-spacing / word-spacingTighten or loosen tracking.

Truncate to one line

CSS
.title-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Clamp to N lines

CSS
.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Tip: Combine background: linear-gradient(...); background-clip: text; color: transparent to fill text with a gradient. Modern browsers all support it.

Example

Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>

<h1>CSS Text Effects</h1>
<div class="box">Edit the CSS on the left, then click Run &raquo;</div>

</body>
</html>
Try it Yourself »

Exercise

Truncate this title to one line with an ellipsis.

.title { white-space: nowrap; overflow: hidden; text- : ellipsis; }

Test yourself

Q1. Which property truncates text with an ellipsis?
Q2. Which property clamps a paragraph to N lines?
Q3. Gradient-filled text uses…

Discussion

Loading…