Add shadow to text, and containers

box-shadow{ offset-x, offset-y, border-radius; }

#div{ box-shadow: 2px 2px 5px #FF0000; }
#div2{ box-shadow: 2px 2px 2px #FF0000, 5px 5px 2px #FFF, 8px 8px 2px #1827F6, 0px -5px 2px #000 ;}
 

Box-shadow – the first example #div box has a single shadow color set to right and bottom; pretty standard. box-shadow: 2px 2px 5px #FF0000;

The second  #div2 example comes with multiple shadows on three sides of the box, and different colors.box-shadow: 2px 2px 2px #FF0000, 5px 5px 2px #FFF, 8px 8px 2px #1827F6, 0px -5px 2px #000;

The first two (2px) are the offset-x, and offset-y; if positive the shadow it will be to the right/bottom, if negative to left/top. The third option is the border-radius, and the forth option is the color. 

Box-shadow can take multiple options in a single declaration, as for #box2 took four.


text-shadow{offset-x, offset-y, border-radius; }

Today is a great sunny day! I am going to run 10 miles!

The text-shadow has the same declaration as box-shadow.

text-shadow: 1px 1px 2px #fff, 3px 3px 2px #000;

text-shadow: -1px -1px 1px #fff, -3px -3px 2px red;

Comments are closed.