CSS3 Box Shadow

Next ❯CSS3 Text

Used to provide shadow effect to elements

  • turned_in_notBox Shadow Property
    • box-shadow

Syntax

box-shadow: (inset) x y blur shadowSize color

x, y are the position of shadow along their axis
blur defines the shadow-blur
shadowSize defines the size of shadow
color defines the color of shadow

inset keyword is used with box-shadow property to show the shadow inside the element, default it will show shadow outside the element


The Box Shadow is grey
#shadow {
/*box-shadow: x y blur shadowSize color;*/
  box-shadow: 10px 10px 5px 1px grey;
  background-color: #808cd1;
  height: 100px;
}
box-shadowsubject
Tryout Some
box-shadow: 10px 10px;
box-shadow: 10px 10px grey;
box-shadow: 10px 10px 5px green;
box-shadow: 10px 10px green,-10px -10px red;
box-shadow: 0 3px 10px #040404, 0 6px 10px #fafafa;
box-shadow:none;
box-shadow:inset 0 0 5px 5px red;

  • CSS3 Text
❮ Prev Border Images
Next ❯CSS3 Text
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯