How to Create Drop Shadows with the box-shadow Property in CSS3
See CSS: Tips and Tricks for similar articles.With the box-shadow
property, we can attach a drop shadow to an element. Here's how:
- Start with an HTML page containing three boxes.
- A drop shadow can be applied to an element using just as few as three values.
To create a simple drop shadow, add the following box-shadow property to
box1
.
The first value (#box1 { box-shadow: 5px 10px #000; }
5px
) is the horizontal offset, or how far to the right the shadow falls. The second value (10px
) is the vertical offset, or how far down the shadow falls. The third value (#000
) is the color of the shadow. Note that the horizontal and vertical offset values can be negative, to display the shadow to the left or top of the element. - Create a more complex and realistic shadow with the addition of two more values
before the color: the blur radius (
4px
in the following example), which gives the shadow a "fuzzy" edge, and the spread distance (2px
in the following example), which extends the shadow away from the element in all directions.#box2 { box-shadow: 5px 10px 4px 2px #f00; }
- You can add multiple shadows to an element with one
box-shadow
property by separating sets of values with a comma, like this:#box3 { box-shadow: 5px 5px #f00, -5px -10px #00f; }
- Open the HTML page in a browser. The three boxes should look like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Drop Shadows</title>
<style type="text/css">
body {
padding: 30px;
}
p {
margin: 0;
padding: 10px;
}
.box {
width: 90%;
margin: 30px;
background:#000;
color:#fff;
}
#box1 {
}
#box2 {
}
#box3 {
}
</style>
</head>
<body>
<div id="box1" class="box">
<p>Box1</p>
</div>
<div id="box2" class="box">
<p>Box2</p>
</div>
<div id="box3" class="box">
<p>Box3</p>
</div>
</body>
</html>
If you open this page in a browser, it looks like this:

Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3 (this article)