CSS Text Effects
In this page:
Outlined Text with -webkit-text-stroke
The non-standard but widely-supported -webkit-text-stroke property draws an outline around each letter's glyph shape, distinct from text-shadow which blurs a colored copy behind the text. It takes a width and color, and is often combined with a transparent fill for a pure outline effect.
Example: Outlined Text with -webkit-text-stroke
<style>
h1 {
-webkit-text-stroke: 2px black;
color: transparent;
}
</style>
<h1>Outlined Text</h1>Gradient Text with background-clip
Gradient-filled text is achieved by applying a background gradient to the text element, then using background-clip: text with a transparent text color so the gradient shows through the letter shapes instead of filling a rectangular box. This is a widely used trick for eye-catching headings.
Example: Gradient Text with background-clip
<style>
h1 {
background: linear-gradient(90deg, purple, orange);
background-clip: text;
color: transparent;
}
</style>
<h1>Gradient Heading</h1>Letter and Word Spacing for Typographic Style
letter-spacing and word-spacing adjust the gap between individual characters and between words respectively. Wide letter-spacing on uppercase text is a very common stylistic choice for headings and labels, giving a more spacious, deliberate, "designed" feel compared to default tight spacing.
Example: Letter and Word Spacing for Typographic Style
<style>
h2 {
letter-spacing: 0.15em;
text-transform: uppercase;
}
</style>
<h2>Designed Heading</h2>Text Decoration Beyond Simple Underlines
text-decoration-style (solid, double, dotted, dashed, wavy) and text-decoration-thickness give creative control over underlines beyond the default thin solid line, while text-underline-offset moves the underline further from the text so it doesn't crowd descenders like "g" or "y".
Example: Text Decoration Beyond Simple Underlines
<style>
a {
text-decoration-style: wavy;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
</style>
<a href="#">Wavy underline, offset from the text</a>Combining Effects for a Signature Heading Style
The most striking text treatments usually combine several of these techniques at once — a gradient fill, a subtle stroke, and deliberate letter-spacing together — rather than relying on any single property alone. As with most CSS effects, restraint matters: combining every technique on every heading quickly looks noisy rather than polished.
Example: Combining Effects for a Signature Heading Style
<style>
h1 {
background: linear-gradient(90deg, purple, orange);
background-clip: text;
color: transparent;
-webkit-text-stroke: 1px black;
letter-spacing: 0.05em;
}
</style>
<h1>Signature Heading</h1>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: