Dual-Layer Shadows for Realistic Card Elevation: CSS Guide

1 Requirements Goal

Development requirement: Adjust the production approval card's shadow to simultaneously express floating range and contact edges, avoiding the entire card being wrapped in a deep black shadow.

This section teaches how to make two shadow layers on the same card separately convey projection range and near-field dark areas.

2 Initial Implementation

The initial approval card used a single, relatively deep and large shadow with parameters 0 14px 26px #102d4659.

Figure 1: Card expressing floating with a single large shadow.

3 Problem Analysis

3.1 Main Problem

When one shadow must express both floating range and edge definition, making the edge clear may require darkening the whole shadow; a large dark area then becomes a prominent decoration that overpowers the card content.

Therefore, the different roles can be separated for independent control, preserving the distinction between range and edge.

3.2 Shadow Division

A larger, softer layer simulates the cast shadow (projection), while a smaller, darker layer represents the contact shadow—areas near the object where ambient light struggles to reach.

Both layers apply to the same element; they do not indicate two independent heights. After separation, the broad soft shadow can be faded independently while keeping the compact edge shadow.

4 Optimization Implementation

4.1 Parameter Splitting

Retain the larger projection's spread but reduce its intensity; add a small-range dark area to help separate the card from the background.

Compare under the same background, card size, and content before deciding whether to adjust blur, offset, and opacity—avoid changing too many conditions at once.

4.2 Style Implementation

.approval-card {
  box-shadow:
    0 14px 26px #102d461a,
    0 2px 5px #102d4626;
}

The first layer has larger spread and is more transparent; the second layer has smaller offset and blur. This shows the combination method; actual parameters still need calibration per background and component size.

4.3 Height Variation

When the element is farther from the surface, the near contact shadow should typically weaken—do not unconditionally darken and enlarge both layers together.

If multiple elevation levels are needed, record the combined parameters separately. Shadows handle spatial hierarchy; approval status is still conveyed by accurate text and business data.

5 Effect Acceptance

Figure 2: Combination of a lighter large projection and a tighter contact shadow.

This example compares single-shadow versus dual-shadow division; it does not judge solution quality by shadow layer count.

☐ Large soft shadow and near dark area each have clear roles.

☐ Card edges are discernible; shadow does not become the main content.

☐ After changing background or raising elevation, recalibrate the combination.

6 Application & Practice

Compare single-shadow and dual-shadow versions of the approval card, then produce a higher-elevation state.

Deliver three images with parameter records, explaining which layer expands, which weakens, and how these changes support the same element's height perception.