CSS3 Box Shadow

Used to provide shadow effect to elements

Box 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-shadow

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#shadow {
/*box-shadow: x y blur shadowSize color;*/
  box-shadow: 10px 10px 5px 1px grey;
  background-color: #808cd1;
  height: 100px;
  color: white;
}
</style>
</head>
<body>
 <div id="shadow">
  <h1 style="text-align: center;">The Box Shadow is grey</h1>
 </div>
</body>
</html>

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

"Learn to Explore..!"

TryOut Editor

Box Shadow

CSS3 Box Shadow

The Box Shadow is grey

Tryout Some

So,

Menu

Web Programs

Web

Helpers

Graphics

Features

Extra