Shadows

Simple box shadow property styles available as utility classes and CSS variables.

Examples (anchor)

Small

Default

Large

Extra large

Examples HTML

<div class="shadow-sm">Small</div>
<div class="shadow">Default</div>
<div class="shadow-lg">Large</div>
<div class="shadow-xl">Extra large</div>

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss

@use "stylemods/scss" as *;
@include shadows-css;

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Enable using custom overrides or in the configuration.scss document:

overrides.scss

@use 'stylemods/scss/configuration' with (
  $enable-shadows: true,
);

configuration.scss

$enable-shadows: true !default;

Using overrides in a custom setup is recommended. See using the framework for more information including how the styles can also be compiled within cascade layers if preferred or required.

Source code (anchor)

The modules and the framework follow the same methods for customizing the default values and using the CSS variables to create custom theme documents. See the customizing page for more information.

shadows.scss

// ---------------------------------------------------------- 
// Shadows
// ----------------------------------------------------------
$shadow-tokens:   ':where(html)' !default;
$shadow:          0 0.25rem 0.75rem rgba(0, 0, 0, 0.15) !default;
$shadow-sm:       0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !default;
$shadow-lg:       0 0.5rem 1.25rem rgba(0, 0, 0, 0.15) !default;
$shadow-xl:       0 1rem 2.5rem rgba(0, 0, 0, 0.175) !default;

@mixin shadows-variables {
  --shadow: #{$shadow};
  --shadow-sm: #{$shadow-sm};
  --shadow-lg: #{$shadow-lg};
  --shadow-xl: #{$shadow-xl};
}

@mixin shadows-variables-css {
  #{$shadow-tokens} {
    @include shadows-variables;
  }
}

@mixin shadows-css {
  @include shadows-variables-css;
  
  .shadow {
    box-shadow: var(--shadow);
  }
    
  .shadow-sm {
    box-shadow: var(--shadow-sm);
  }
    
  .shadow-lg {
    box-shadow: var(--shadow-lg);
  }
    
  .shadow-xl {
    box-shadow: var(--shadow-xl);
  }
} // end shadows-css