CSS Box-shadow
Home Learning Path LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to CSS: Box-shadow

Quick Copy Boxes



This is a div with box-shadowing!

Notice the box above has a darker green shadow on the side and bottom. That is done using the CSS box-shadow property. Before we look at the code to make this box, let's look at the genral box-shadow syntax.


Syntax


.shadow {
  box-shadow: 30px 25px 5px 10px #443700;
}

shadow - This is our CSS class name.
h-shadow - 30px - The horizontal shadow position.
v-shadow - 25px - The vertical shadow position.
blur - 5px - The size of the blur effect.
spread - 10px - The size of the shadow.
color - #443700 - The color of the shadow

✶ <div>✶
with
box-shadow: 30px 25px 5px 10px #443700;


Box-shadow Values

Some of the values are required and some are not.
✶ h-shadow - Required ✔
✶ v-shadow - Required ✔
✶ blur - optional
✶ spread - optional
✶ color - option (black is default)

Many of the values can be negative or possitive.
✶ h-shadow - Negative or Possitive ✔
✶ v-shadow - Negative or Possitive ✔
✶ blur - Possitive Only
✶ spread - Negative or Possitive ✔
✶ color - N/A


Example: Green Box

Now let's make the box you see below!


This is a div with box-shadowing!

CSS


.greenBox {
   background-color: #A0FF75;
   width: 50%;
   box-shadow: 8px 8px  2.5px  #1B5C1C;
   padding: 50px;
}

greenBox - Class Name
background-color - #A0FF75 - (Green Color)
width - 50% of its Container
boxshadow:
8px - H-shadow
8px - V-shadow
2.5 - Blur
#1B5C1C - Shadow Color
padding - 50px - (on each side)

HTML


<div class = "greenBox">
  This is a div with box-shadowing!
</div>
  

Inset: Reverse Shadow

Inset Example
box-shadow: 8px 8px 2.5px #57130D inset;

You can use inset to create an inside shadow effect. The word inset is place at the end of the box shadow code. (See example CSS below)

Example: Inset


.insetBox {
   background-color: #FF3926;
   box-shadow: 8px 8px 2.5px #57130D inset;
   padding: 50px;
   width: 50%;
 }
Color Selector



Hex:


RBG:

Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.