CSS Text Effects

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>