XQA
Back to Web Development
2026-01-175 min read

Box Shadow (Web Development)

Learn Box Shadow (Web Development) step by step with clear examples and exercises.

Title: Box Shadow (Web Development)

Why This Matters

Box shadows are an essential aspect of web development that adds depth, dimension, and visual appeal to elements on a webpage. They help create a sense of hierarchy, highlight important content, and even simulate physical objects with realistic shadows. In this lesson, we'll explore the use of box shadows in CSS, common mistakes to avoid when implementing them, practice questions, and frequently asked questions.

Prerequisites

Before diving into box shadows, you should have a basic understanding of HTML and CSS. Familiarity with selectors, properties, values, and the box model will be particularly helpful. You should also know how to inspect elements using browser developer tools.

Essential CSS Concepts

  • Selectors: elements, classes, and IDs
  • Properties: various styling attributes like color, font-size, width, etc.
  • Values: specific settings for properties (e.g., red for the color property)
  • Box Model: understanding the relationship between an element's content, padding, border, and margin

Core Concept

Box shadows are created using the box-shadow property in CSS. This property takes up to four length values, each representing a different shadow component: horizontal offset, vertical offset, blur radius, and spread radius (in that order).

/* Syntax */
box-shadow: h-offset v-offset blur-radius spread-radius color;

Here's an example of how to create a simple box shadow:

div {
width: 200px;
height: 200px;
background-color: #f00;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

In this example, the box-shadow property creates a red div with a box shadow that is 10 pixels horizontally and vertically offset from the element, has a blur radius of 5 pixels, and a spread radius of 0 (meaning it doesn't expand beyond the specified blur radius). The shadow color is set to semi-transparent black (rgba(0, 0, 0, 0.5)).

Box Shadow Syntax Breakdown

  1. h-offset: Horizontal offset of the shadow from the element's left edge.
  2. v-offset: Vertical offset of the shadow from the element's top edge.
  3. blur-radius: Amount of blur applied to the shadow edges.
  4. spread-radius: Amount by which the shadow should be expanded beyond its blur radius (optional, default is 0).
  5. color: Color of the shadow.

Worked Example

Let's create a simple HTML page with a box shadow using the example from the Core Concept section:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Shadow Example</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #f00;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Save this code as box_shadow_example.html and open it in a web browser to see the box shadow in action.

Common Mistakes

  1. Forgetting the unit of measurement: The length values for the horizontal offset, vertical offset, blur radius, and spread radius must be followed by a valid CSS unit (e.g., px, em, or rem).
  1. Using invalid color syntax: Make sure to use a valid color syntax when specifying the shadow color. For example, rgba(0, 0, 0, 0.5) is correct, while #f00black is not.
  1. Forgetting the comma separator: Each length value and the color should be separated by a comma (,) in the box-shadow property.
  1. Not considering browser compatibility: Older browsers may have limited support for certain shadow properties, so it's essential to test your pages across multiple browsers to ensure consistent rendering.

Common Mistakes - Advanced

  1. Overlapping shadows: When using multiple box shadows on a single element, be mindful of the order in which they are declared as later declarations may overlap earlier ones.
  2. Incorrect shadow placement: Ensure that the horizontal and vertical offsets are set appropriately to achieve the desired shadow effect.
  3. Ignoring the spread radius: Using a non-zero spread radius can help create more pronounced shadows or inner shadows by expanding the shadow beyond its blur radius.

Practice Questions

  1. Create a box shadow that is 20 pixels horizontally offset and 15 pixels vertically offset with a blur radius of 10 pixels and a spread radius of 2 pixels using the box-shadow property.
div {
box-shadow: 20px 15px 10px 2px rgba(0, 0, 0, 0.5);
}
  1. How can you create a box shadow that appears both inside and outside an element?

To create an inner shadow, set the horizontal offset and vertical offset to negative values. For example:

div {
box-shadow: -10px -10px 5px rgba(0, 0, 0, 0.5);
}
  1. What happens if you set the spread radius to a value greater than the blur radius in the box-shadow property?

When the spread radius is greater than the blur radius, the shadow will appear larger and more pronounced, but the edges may become less blurry due to the increased size.

FAQ

  1. Why is my box shadow not showing up? Check that your CSS is properly linked to your HTML file, and ensure there are no syntax errors in your CSS code. Also, make sure you've specified a color for the shadow.
  1. Can I create multiple box shadows on a single element? Yes! You can separate multiple box-shadow declarations with a comma (,).
  1. How do I create a drop shadow effect using box shadows? To create a drop shadow, you'll typically want to offset the shadow in one direction more than the other and use a larger blur radius for that offset. For example:
div {
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
}

This creates a drop shadow with the shadow appearing below the element due to the positive vertical offset and larger blur radius.

Box Shadow (Web Development) | Web Development | XQA Learn