CSS: Box Shadow

By Xah Lee. Date: . Last updated: .

Interactive Box Shadow Generator

offsets x y:
or offset length and direction

blur , spread

Simple Box Shadow

Here's a simple box shadow:

SHADOW!

Here's the CSS code:

div
{
box-shadow: 5px 5px red
}

Syntax

  1. box-shadow: x_offset y_offset color
  2. box-shadow: x_offset y_offset blur color
  3. box-shadow: x_offset y_offset blur spread color
  4. box-shadow: inset x_offset y_offset blur spread color
  5. box-shadow: shadow_spec_1, shadow_spec_2, …

Blur

Here are boxes with increasing blur value.

box-shadow:3px 3px blurpx red

0
2
4
6
8
10

Spread

Here are boxes with increasing spread value.

box-shadow:5px 5px 0px spreadpx red

-2
0
2
4
6

Inset Box Shadow

“inset” box shadow makes the shadow go inside the box. All other parameters are the same. Here's a example.

box-shadow: inset 3px 3px red;

Inset Shadow Example 2

box-shadow: inset 0px 0px 20px 5px red;

Inset Shadow Example 3

box-shadow: inset 5px 5px 5px 0px grey;

Multiple Shadow with Inset

box-shadow: inset 0px 0px 4px 3px red, 0px 0px 4px 3px blue;

Multiple Box Shadows

multi box lunch




Here's the CSS code:

#multiboxlunch80870 {
display:table;
border-radius:9px;
padding:0.5ex;
margin:5ex;
box-shadow:
8px 6px 13px 8px hsl(1, 100%, 50%),
-16px 12px 20px 16px hsl(60, 100%, 50%),
48px 36px 71px 28px hsl(180, 100%, 50%);
}

Browser Support

Box shadow is supported in all browsers, as of 2012-04-20.

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

CSS Basics

  1. Basics
  2. Tag Matching Tutorial
  3. Selector Syntax
  4. Units

Color

  1. Color Syntax
  2. Color Names
  3. Opacity
  4. Linear Gradient
  5. Radial Gradient

Font

  1. font-family
  2. Standard Web Fonts
  3. font-size
  4. Meaning of Font Size
  5. Font Weight
  6. Chinese Font Names

Box Model

  1. Border
  2. Outline
  3. Margin vs Padding
  4. Box Sizing

Layout

  1. Layout Tutorial
  2. Display Property
  3. Position: static, relative, fixed, absolute
  4. Pure CSS Table
  5. Tabbed Menu
  6. 3 Columns Page Layout
  7. Multi-Column Layout for Text Flow
  8. Fix Element to Window
  9. Centering
  10. Flowing List
  11. z-index
  12. Text Over Image
  13. Text Flow Around Image
  14. OverFlow, Scrollbar

Transform/Animation

  1. 2D Transform
  2. Transition
  3. Animation

Line Wrap, Justification

  1. Line Wrap
  2. Text Alignment, Justification
  3. Match first-letter and first-line
  4. “:before”, “:after”
  5. Text Decoration: Underline, Overline, Line-Through
  6. Letter Spacing, Word Spacing

Box Decoration

  1. Box Shadow
  2. Text Shadow
  3. Round Corners
  4. Background Image
  5. Image Rollover

Misc

  1. Computed Style
  2. Pseudo Class vs Pseudo Element
  3. Media Query
  4. Variable
  5. calc
  6. Reset
  7. user-select
  8. Data URI Scheme
  9. protocol-relative URL
  10. Default Unit
  11. Declaring Character Set in CSS File
  12. Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
  13. Display Table on Small Screen
  14. Fixed Aspect Ratio
  15. Add Icon to Links
  16. Progress Bar Example

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. CSS
  3. JavaScript
  4. JS Obj Ref
  5. DOM
  6. SVG
  7. Blog