Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Text Shadow

The text-shadow property introduces a shadow effect to text.

In its basic application, you specify solely the horizontal shadow (2px) and the vertical shadow (2px):

Examples

h1 {
text-shadow: 2px 2px;
}

Now, incorporate a (red) color into the shadow.

Examples

h1 {
text-shadow: 2px 2px red;
}

Next, apply a blur effect (5px) to the shadow.

Example

h1 {
text-shadow: 2px 2px 5px red;
}

More Text Shadow Examples

Example 1

Applying text-shadow to white text.

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

Example 2

Creating a red neon glow effect using text-shadow.

h1 {
text-shadow: 0 0 3px #ff0000;
}

Example 3

Creating a neon glow effect with red and blue using text-shadow.

h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Example 4

h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Tip: Visit our CSS Fonts chapter to learn how to change fonts, text size, and text style.

Tip: Visit our CSS Text Effects chapter to explore various text effects.

The CSS Text Shadow Property

Property	Description
text-shadow	Specifies the shadow effect applied to text.