Directional Depth Shadow

This shadow style creates depth using directional light simulation, emphasizing one axis to suggest hierarchy and flow.

HTML

<div class="shadow-directional">
  Directional
</div>

<div class="shadow-directional">
  Directional
</div>

CSS

.shadow-directional {
  width: 200px;
  padding: 2rem 0;
  border-radius: 11px;
  background: #ffffff;
  color: #111827;
  font-size: 12px;
  text-align: center;
  box-shadow:
    6px 6px 18px rgba(0,0,0,0.12),
    -2px -2px 6px rgba(255,255,255,0.8);
}

@media (prefers-color-scheme: dark) {
  .shadow-directional {
    background: #27272a;
    color: #f4f4f5;
    box-shadow:
      8px 8px 24px rgba(0,0,0,0.7),
      -2px -2px 6px rgba(255,255,255,0.06);
  }
}

.shadow-directional {
  width: 200px;
  padding: 2rem 0;
  border-radius: 11px;
  background: #ffffff;
  color: #111827;
  font-size: 12px;
  text-align: center;
  box-shadow:
    6px 6px 18px rgba(0,0,0,0.12),
    -2px -2px 6px rgba(255,255,255,0.8);
}

@media (prefers-color-scheme: dark) {
  .shadow-directional {
    background: #27272a;
    color: #f4f4f5;
    box-shadow:
      8px 8px 24px rgba(0,0,0,0.7),
      -2px -2px 6px rgba(255,255,255,0.06);
  }
}

Notes

• Directional light simulation
• Clear hierarchy cue
• No hover or motion required
• Works well for featured tiles

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.