Create Box Shadows with CSS

Introduction

In this lab, you will explore the powerful CSS box-shadow property and learn how to create visually appealing shadow effects for web elements. Through a step-by-step approach, you'll understand the fundamental syntax of box shadows, apply basic and advanced shadow techniques, and discover how to customize shadow properties to enhance the depth and visual interest of HTML elements.

The lab covers key concepts such as understanding box shadow syntax, applying shadows to different shapes, experimenting with offset, blur radius, and color variations. By the end of this lab, you'll have practical skills in creating professional-looking shadows that can transform the visual presentation of web designs, adding subtle depth and dimensionality to your user interfaces.

Understand Box Shadow Syntax

In this step, you'll learn the fundamental syntax of CSS box shadows and how they can add depth and visual interest to web elements. The box-shadow property is a powerful CSS feature that allows you to create shadow effects for HTML elements.

Let's start by creating a new HTML file to explore box shadow syntax. Open the WebIDE and create a file named index.html in the ~/project directory.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Box Shadow Syntax</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        /* Basic box-shadow syntax */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Let's break down the box-shadow syntax:

5px: Horizontal offset (moves shadow right)
5px: Vertical offset (moves shadow down)
10px: Blur radius (softens the shadow)
rgba(0, 0, 0, 0.3): Shadow color with transparency

The basic syntax is: box-shadow: [horizontal offset] [vertical offset] [blur radius] [color]

Example output of the rendered box with shadow:

+------------------------+
|                        |
|    [Gray Box with     |
|     Soft Shadow]      |
|                        |
+------------------------+

Key points to remember:

Positive offset values move the shadow right and down
Negative offset values move the shadow left and up
Blur radius softens the shadow edges
You can use color names, hex, RGB, or RGBA values

Apply Basic Box Shadow to a Div

In this step, you'll learn how to apply a basic box shadow to a div element, building upon the syntax you learned in the previous step. We'll modify the existing HTML file to demonstrate different shadow effects.

Open the index.html file in the WebIDE and update its content with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Box Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
      }

      /* Light shadow */
      .light-shadow {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
      }

      /* Darker shadow */
      .dark-shadow {
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box light-shadow"></div>
      <div class="box dark-shadow"></div>
    </div>
  </body>
</html>

Let's break down the box shadow application:

We created two div elements with different shadow intensities
.light-shadow uses a subtle shadow with:
- 5px horizontal offset
- 5px vertical offset
- 10px blur radius
- Light black color with 20% opacity
.dark-shadow uses a more pronounced shadow with:
- 10px horizontal offset
- 10px vertical offset
- 15px blur radius
- Darker black color with 50% opacity

Example visual output:

+------------------------+------------------------+
|                        |                        |
|   [Light Shadow Box]   |   [Dark Shadow Box]    |
|                        |                        |
+------------------------+------------------------+

Key observations:

Increasing offset values moves the shadow further from the element
Increasing blur radius makes the shadow softer
Adjusting opacity changes shadow intensity

Customize Box Shadow Properties

In this step, you'll explore advanced customization options for box shadows, including inset shadows, spread radius, and color variations. We'll update the index.html file to demonstrate these advanced properties.

Open the index.html file in the WebIDE and replace its content with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Customized Box Shadows</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: #f0f0f0;
      }

      /* Inset shadow */
      .inset-shadow {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
      }

      /* Spread radius */
      .spread-shadow {
        box-shadow: 5px 5px 0 10px rgba(0, 0, 255, 0.2);
      }

      /* Colored shadow */
      .colored-shadow {
        box-shadow: 8px 8px 12px rgba(255, 0, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box inset-shadow"></div>
      <div class="box spread-shadow"></div>
      <div class="box colored-shadow"></div>
    </div>
  </body>
</html>

Let's explore the new box shadow customizations:

Inset Shadow:
- Uses inset keyword to create an inner shadow
- Gives the effect of the element being pressed or indented
- Syntax: box-shadow: inset [horizontal offset] [vertical offset] [blur radius] [color]
Spread Radius:
- Adds an additional value to expand the shadow
- Fourth numeric value controls shadow spread
- In the example, 10px spread creates a blue-tinted shadow border
Colored Shadow:
- Use RGBA to create colored shadows with transparency
- Example uses a red shadow with 40% opacity

Example visual output:

+------------------------+------------------------+------------------------+
|                        |                        |                        |
| [Inset Shadow Box]     | [Spread Shadow Box]    | [Colored Shadow Box]   |
|                        |                        |                        |
+------------------------+------------------------+------------------------+

Key points:

inset creates an inner shadow
Spread radius expands the shadow
Use RGBA for colored, transparent shadows

Create a Circular Element with Shadow

In this step, you'll learn how to create a circular element with a box shadow using CSS border-radius and box-shadow properties. Open the index.html file in the WebIDE and update its content with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Circular Element with Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }

      .circular-element {
        width: 200px;
        height: 200px;
        background-color: #ffffff;

        /* Create circular shape */
        border-radius: 50%;

        /* Add box shadow */
        box-shadow:
          0 10px 20px rgba(0, 0, 0, 0.2),
          0 6px 6px rgba(0, 0, 0, 0.15);

        /* Center content */
        display: flex;
        justify-content: center;
        align-items: center;

        /* Optional: add text */
        font-family: Arial, sans-serif;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="circular-element">Circular Shadow</div>
    </div>
  </body>
</html>

Key techniques for creating a circular element with shadow:

Circular Shape:
- Use border-radius: 50% to create a perfect circle
- Ensure width and height are equal
Box Shadow:
- First shadow: 0 10px 20px rgba(0, 0, 0, 0.2)
  - Vertical offset of 10px
  - 20px blur radius
  - Soft black color with 20% opacity
- Second shadow: 0 6px 6px rgba(0, 0, 0, 0.15)
  - Adds depth with a closer, softer shadow

Example visual output:

+------------------------+
|                        |
|    [Circular Element   |
|     with Soft Shadow]  |
|                        |
+------------------------+

Key points:

border-radius: 50% creates a perfect circle
Multiple box shadows can create depth
Adjust opacity and blur for desired effect

Experiment with Multiple Shadow Effects

In this step, you'll explore advanced techniques for creating complex shadow effects using multiple box shadows. Open the index.html file in the WebIDE and update its content with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Shadow Effects</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }

      .card {
        width: 300px;
        height: 400px;
        background-color: white;
        border-radius: 10px;

        /* Multiple shadow effect */
        box-shadow: 
                /* Outer shadow */
          0 10px 20px rgba(0, 0, 0, 0.1),
          /* Inner shadow */ inset 0 -5px 10px rgba(0, 0, 0, 0.05),
          /* Colored accent shadow */ 0 15px 25px rgba(0, 123, 255, 0.2);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        transition: transform 0.3s ease;
      }

      .card:hover {
        transform: scale(1.05);
        box-shadow:
          0 15px 30px rgba(0, 0, 0, 0.2),
          inset 0 -5px 10px rgba(0, 0, 0, 0.1),
          0 20px 35px rgba(0, 123, 255, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>Shadow Experiment</h2>
      <p>Hover to see shadow effect!</p>
    </div>
  </body>
</html>

Key techniques for multiple shadow effects:

Layered Shadows:
- First shadow: Outer soft shadow
- Second shadow: Inner subtle shadow
- Third shadow: Colored accent shadow
Shadow Composition:
- 0 10px 20px rgba(0, 0, 0, 0.1): Soft outer shadow
- inset 0 -5px 10px rgba(0, 0, 0, 0.05): Inner subtle shadow
- 0 15px 25px rgba(0, 123, 255, 0.2): Blue accent shadow
Hover Effect:
- Increase shadow intensity on hover
- Add scale transformation for interactive feel

Example visual output:

+------------------------+
|                        |
|   [Card with Complex   |
|    Shadow Effects]     |
|                        |
+------------------------+

Key points:

Combine multiple shadows for depth
Use inset for inner shadows
Create interactive effects with hover

Summary

In this lab, participants explore the powerful CSS box-shadow property to create visually appealing depth and dimension for web elements. By learning the fundamental syntax of box shadows, students discover how to apply shadow effects using horizontal and vertical offsets, blur radius, and color parameters, enabling them to enhance the visual design of HTML elements.

The lab guides learners through practical exercises, including creating basic box shadows, customizing shadow properties, and experimenting with multiple shadow effects. Participants will gain hands-on experience in manipulating shadow characteristics such as offset direction, blur intensity, and color transparency, which can significantly improve the aesthetic and visual hierarchy of web page components.