Prev Page Next Page
Top

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





FEEDBACK

Rating


Message