CSS3 Shadow Tutorial and CSS3 Shadow Reference

Published on: September 9, 2014   Last Updated on : June 5, 2018   Posted By : WebDesignReference

CSS3 supports two type of shadow property for styling an element.

  • CSS3 Box Shadow : This property comes under CSS3 Border.
  • CSS3 Text shadow : This property comes under CSS3 Text Effect.

CSS3 : box-shadow Property

Example : use of CSS3 : Box-shadow Property

#box_shadow {
width: 300px;
height: 100px;
background: green;
box-shadow: 9px 10px 10px 1px #000
}

CSS3 : text-shadow Property

Text Shadow Example

Example : use of CSS3 : Text-shadow Property

#text_shadow {
width: 300px;
height: 100px;
background: yellow;
color: blue;
text-align: center;
}

h4 {
text-shadow: 6px 5px 8px #000;
padding-top: 20px;
}

Also Related to CSS3

 

Leave a Reply