1.0.1 • Public • Published

Fylgja - Elevation

NPM version license

The @fylgja/elevation component has been replaced by @fylgja/shadow.

The shadow component offers better shadow defaults, and fully embraces the Design Token (CSS Props) system.

This package will be deprecated in the next release.

The Elevation component is a util package for shadows, where it offers shadows as CSS variables.

It follows the same principals as Google's material design.

But stay's more small and practical, by focusing only on elevation indexes that are commonly used.


npm install @fylgja/elevation

Then include the component in to your code via;

@use "@fylgja/elevation";
// Or via PostCSS import
@import "@fylgja/elevation";

How to use

The variables can be used on any shadow property that accepts 4 values. For example the box-shadow property.

The elevation component offers 6 layers based on the material design layers.

.example {
    box-shadow: var(--elevation-z2);

If you plan to just use the SCSS version and don't want the CSS variables. You can disable them via the $enable-elevation boolean.

The SCSS values are available via the map $elevation. Or the SCSS function elevation().

.feeling-sassy {
    box-shadow: elevation(2);


As with almost all of our components, CSS variables can be configured to add your own look/style.

Want direct control on the base styles, here are the following SCSS variables can you modify.

$enable-elevation: true !default;

$elevation-color: black !default;
$elevation-umbra: rgba($elevation-color, 0.2) !default;
$elevation-penumbra: rgba($elevation-color, 0.14) !default;
$elevation-ambient: rgba($elevation-color, 0.12) !default;
$elevation: (
    z1: (
        0 2px 1px -1px $elevation-umbra,
        0 1px 1px $elevation-penumbra,
        0 1px 3px $elevation-ambient
    z2: (
        0 3px 1px -2px $elevation-umbra,
        0 2px 2px $elevation-penumbra,
        0 1px 5px $elevation-ambient
    z3: (
        0 2px 4px -1px $elevation-umbra,
        0 4px 5px $elevation-penumbra,
        0 1px 10px $elevation-ambient
    z4: (
        0 3px 5px -1px $elevation-umbra,
        0 6px 10px $elevation-penumbra,
        0 1px 18px $elevation-ambient
    z5: (
        0 5px 5px -3px $elevation-umbra,
        0 8px 10px 1px $elevation-penumbra,
        0 3px 14px 2px $elevation-ambient
    z6: (
        0 7px 8px -4px $elevation-umbra,
        0 12px 17px 2px $elevation-penumbra,
        0 5px 22px 4px $elevation-ambient
) !default;

Dept map

This is based on the material design version. See there docs here at material.io

Material Fylgja Description, For example
dp0 z0 same as none
dp1 z1 Cards, Searchbars
dp2 z2 Floating Btn's
dp4 z3 Navbar, Fixed header
dp6 z4 Popup, FAB
dp8 z5 Bottom Navbar, Floating/picked up Component
dp12 z6 Offcanvas, Modal

There are other frameworks that use this same pattern. E.g. materialize

Package Sidebar


npm i @fylgja/elevation



Weekly Downloads






Unpacked Size

7.4 kB

Total Files


Last publish


  • allrude
  • grimlink