CSS Typography Text Shadow

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

To add shadows to text, use the text-shadow property. The syntax is as follows:

text-shadow: horizontal-offset vertical-offset blur color;

Shadow without blur radius

h1 {
  text-shadow: 2px 2px #0000FF;
}

This creates a blue shadow effect around a heading

Shadow with blur radius

To add a blur effect, add an option blur radius argument

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

Multiple Shadows

To give an element multiple shadows, separate them with commas

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}


Got any CSS Question?