Skip to main content

​
Overview

box-shadow is supported by the Skelementor importer, but bundled Skelementor shadow-* utility classes are not currently shipped in skelementor-utilities.css. Define the classes below in your own CSS when you need a semantic shadow scale.
ClassBox shadow (CSS)Usage
.shadow-smbox-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);Subtle lift for cards and inputs
.shadow-mdbox-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);Default elevated surfaces
.shadow-lgbox-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);Strong depth for heroes and modals
.shadow-xlbox-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);Extra-large elevation (matches the preview scale)
.shadow-panelbox-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);Large feature panels

​
Example

​
Suggested Pattern

.shadow-sm {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.shadow-md {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.shadow-lg {
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

​
Usage

​
Card Surface

<div class="elementor-element card shadow-md">
  <h3 class="text-xl font-semibold mb-3">
    Elevated card
  </h3>
  <p class="text-gray">
    Use shadow to separate a surface from the page background.
  </p>
</div>

​
Large Feature Panel

.shadow-panel {
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

<section class="shadow-panel rounded-2xl bg-white p-8">
  <h2 class="text-3xl font-bold mb-4">
    Feature panel
  </h2>
  <p class="text-gray">
    Use deeper shadows sparingly on high-emphasis surfaces.
  </p>
</section>

​
Best Practices

  • Prefer a small semantic shadow scale instead of many one-off values
  • Keep shadows subtle on dense UI and stronger on isolated feature surfaces
  • Combine shadows with border radius and background color so elevation feels intentional
  • Test in both light and dark themes because the same shadow can feel much heavier in dark surfaces

Opacity

Pair shadow and opacity for layered states

Filters

Pair box-shadow with the shipped filter utility families

Custom CSS

Import your own custom shadow utilities through Skelementor

Borders

Combine radius and border styling with shadow depth