Latest web development tutorials
 

W3.CSS Text Effects


Text Shadow

The w3-text-shadow class is designed to work with all colors:

Text Shadow


Text Shadow


Text Shadow


Text Shadow

Example

<div class="w3-container w3-light-grey">
  <h2 class="w3-text-shadow">Text Shadow</h2>
</div>
Try It Yourself »

Text Opacity

The w3-opacity class is designed to work with all colors:

Text Opacity


Text Opacity


Text Opacity


Text Opacity


Text Opacity


Text Opacity

Example

<div class="w3-container w3-deep-purple">
  <h2 class="w3-opacity">Text Opacity</h2>
</div>
Try It Yourself »

Special Effects

Combining opacity and bold:

Text Opacity

Mixing Colors:

Yellow + Shadow + Bold

Combining shadow, bold and opacity:

Shadow + Opacity + Bold

Mixing Colors:

Yellow + Shadow + Bold