Drop Shadow

This page demonstrates several CSS-only drop-shadow illusions using pseudo-elements and transforms. These patterns are useful when you want stylized paper/card shadows beyond a single box-shadow value.

Implementation Notes

• The base .drop-shadow class sets up positioned pseudo-elements used to draw custom shadow shapes.
• Variant classes (for example .lifted, .curled, .perspective) only change pseudo-element geometry and transforms.
• The page-level SCSS only styles the demo surface and spacing. The actual shadow effects are defined in drop-shadow.scss.

Code for This Page

This HTML pattern shows one tile in the grid. The render repeats the same structure with different shadow modifier classes.

<div class="col-default-12 col-tablet-small-6">
  <div class="drop-shadow lifted">
    <p>Lifted Corners</p>
  </div>
</div>

This base CSS is the reusable setup. Variant selectors then shape the pseudo-element shadows.

.drop-shadow {
  position: relative;
  transform: translate3d(0, 0, 0);
}

.drop-shadow::before,
.drop-shadow::after {
  content: '';
  position: absolute;
  z-index: -2;
}

.drop-shadow > :first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  box-shadow:
    0 1px 4px rgb(0 0 0 / 30%),
    0 0 40px rgb(0 0 0 / 10%) inset;
}

Files for This Page

• project/example/in/example/drop-shadow.html - page content and demo markup.
• project/example/in/asset/css/content/example/drop-shadow.scss - drop-shadow effect variants and page demo surface styling.

Attribution