CSS Shadow Effects

➢With CSS you can add shadow to text and to elements.
In these chapters you will learn about the following properties:
➢text-shadow
➢box-shadow

CSS Text Shadow

➢The CSS text-shadow property applies shadow to text.

EXAMPLE:

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

RESULT:

Text-shadow effects

Run

EXAMPLE:

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

RESULT:

Text-shadow effects

Run

EXAMPLE:

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

RESULT:

Text-shadow effects

Run

EXAMPLE:

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

RESULT:

Text-shadow effects

Run

Multiple Shadows

EXAMPLE:

h1 {
text-shadow: 0 0 3px green, 0 0 5px lightgreen;
}

RESULT:

Text-shadow effects

Run

EXAMPLE:

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

RESULT:

Text-shadow effects

Run

CSS Box Shadow

➢The CSS box-shadowproperty is used to apply one or more shadows to an element.

EXAMPLE:

h1 {
box-shadow: 10px 10px;
}

RESULT:

box-shadow effects

Run

EXAMPLE:

h1 {
box-shadow: 10px 10px lightgreen;
}

RESULT:

box-shadow effects

Run

Add a Blur Effect to the Shadow

EXAMPLE:

h1 {
box-shadow: 10px 10px 5px lightgreen;
}

RESULT:

box-shadow effects

Run

Set the Spread Radius of the Shadow

EXAMPLE:

h1 {
box-shadow: 10px 10px 5px 12px lightgreen;
}

RESULT:

box-shadow effects

Run

Set the inset Parameter

EXAMPLE:

h1 {
box-shadow: 10px 10px 5px lightgreen inset;
}

RESULT:

box-shadow effects

Run

Prev Page Next Page