<div class="shadow--"></div>
<div class="shadow--{{name}}"></div>
/* No context defined. */
  • Content:
    :root {
      --shadow-color: 0deg 0% 0%;
      --shadow-elevation-low:
        0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.1),
        0.8px 1px 1.4px -1.2px hsl(var(--shadow-color) / 0.1),
        1.9px 2.5px 3.5px -2.5px hsl(var(--shadow-color) / 0.1);
      --shadow-elevation-medium:
        0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.11),
        1.6px 2px 2.9px -0.8px hsl(var(--shadow-color) / 0.11),
        4px 5.1px 7.3px -1.7px hsl(var(--shadow-color) / 0.11),
        9.6px 12.5px 17.7px -2.5px hsl(var(--shadow-color) / 0.11);
      --shadow-elevation-high:
        0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.1),
        2.8px 3.6px 5.1px -0.4px hsl(var(--shadow-color) / 0.1),
        5.3px 6.8px 9.7px -0.7px hsl(var(--shadow-color) / 0.1),
        8.6px 11.1px 15.8px -1.1px hsl(var(--shadow-color) / 0.1),
        13.8px 17.8px 25.3px -1.4px hsl(var(--shadow-color) / 0.1),
        21.5px 27.8px 39.5px -1.8px hsl(var(--shadow-color) / 0.1),
        32.8px 42.3px 60.2px -2.1px hsl(var(--shadow-color) / 0.1),
        48.2px 62.3px 88.6px -2.5px hsl(var(--shadow-color) / 0.1);
    }
    
    div[class^="shadow"] {
      border: 1px solid var(--color-charcoal);
      height: 300px;
      width: 300px;
    }
    
    .shadow--low {
      box-shadow: var(--shadow-elevation-low);
    }
    
    .shadow--medium {
      box-shadow: var(--shadow-elevation-medium);
    }
    
    .shadow--high {
      box-shadow: var(--shadow-elevation-high);
    }
  • URL: /components/raw/shadows/shadows.css
  • Filesystem Path: src/components/01-atoms/05-media/shadows/shadows.css
  • Size: 1.3 KB

Shadows

Taken from Shadow Palette Generator by Josh Comeau. See the acompanying article