shadow-scss
<div class="box"></div>
@import "shadow-scss";

.box {
    width: 300px;
    height: 120px;
    background-color: #ccc;
    box-shadow: box-shadow(
        $stepX: -10px,
        $stepY: 10px,
        $count: 5
    );
}
<div class="box-3d"></div>
@import "shadow-scss";

.box-3d {
    margin-top: 36px;
    width: 120px;
    height: 120px;
    background-color: #ccc;
    box-shadow: box-shadow(
        $stepX: .5px,
        $stepY: -.5px,
        $color: #999,
        $count: 75
    );
}
<div class="box-colors"></div>
@use "sass:math";
@use "sass:color";
@import "shadow-scss";

@function box-color($i, $count) {
    @return color.mix(#666, #bbb, math.div($i, $count) * 100%);
}

.box-colors {
    width: 300px;
    height: 120px;
    background-color: #ccc;
    box-shadow: box-shadow(
        $stepX: -6px,
        $stepY: 6px,
        $color: get-function("box-color"),
        $count: 5
    );
}
<div class="box-inset"></div>
@use "sass:math";
@use "sass:color";
@import "shadow-scss";

@function box-color-2($i, $count) {
    @return color.mix(#0d8aee, #064474, math.div($i, $count) * 100%);
}

.box-inset {
    width: 300px;
    height: 120px;
    background-color: #2196f3;
    box-shadow: box-shadow(
        $inset: true,
        $stepX: 10px,
        $color: get-function("box-color-2"),
        $count: 5
    )
}
<div class="circular"></div>
@use "sass:math";
@import "shadow-scss";

$radius: 60px;

@function circular-x($i, $count) {
    @return $radius * math.cos(math.div($i, $count) * 360deg);
}

@function circular-y($i, $count) {
    @return $radius * math.sin(math.div($i, $count) * 360deg);
}

.circular {
    margin-top: 54px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #2196f3;
    box-shadow: box-shadow(
        $x: get-function("circular-x"),
        $y: get-function("circular-y"),
        $count: 6
    )
}
LONG
<div class="long-text"></div>
@import "shadow-scss";

.long-text {
    color: #666;
    font-size: 90px;
    font-family: Arial;
    font-weight: 900;
    padding: 0 0 12px 0;
    text-shadow: text-shadow(
        $x: -.5px,
        $y: .5px,
        $color: #ccc,
        $stepX: -.5px,
        $stepY: .5px,
        $count: 60
    );
}
TEXT
Inspired by this codepen.
<div class="text-3d"></div>
@use "sass:math";
@use "sass:color";
@import "shadow-scss";

@function text-3d-blur-radius($i, $count) {
    @return $i * 4px;
}

@function text-3d-color($i, $count) {
    @return color.mix(#999, #eee, math.div($i, $count) * 100%);
}

@function text-3d-blur-color($i, $count) {
    @return color.mix(rgba(0, 0, 0, .2), rgba(0, 0, 0, .05), math.div($i, $count) * 100%);
}

.text-3d {
    color: #fff;
    font-size: 100px;
    font-family: Arial;
    font-weight: 900;
    text-shadow: text-shadow(
        $stepY: 1px,
        $color: get-function("text-3d-color"),
        $count: 12
    ), text-shadow(
        $y: -3px,
        $stepY: 3px,
        $blur-radius: get-function("text-3d-blur-radius"),
        $color: get-function("text-3d-blur-color"),
        $count: 5
    );
}
Plastic
Inspired by this codepen.
<div class="plastic"></div>
@use "sass:math";
@import "shadow-scss";

@function plastic-x($i, $count) {
    $r: $i % 9;
    @if($r == 0) {
        $r: 9;
    }
    @return (5 - $r) * .7px;
}

@function plastic-y1($i, $count) {
    @return math.ceil(math.div($i, 7)) * 1px - 4px;
}

@function plastic-y2($i, $count) {
    @return math.ceil(math.div($i, 6)) * 1px;
}

.plastic {
    font-family: "Pacifico";
    color: #fff;
    font-size: 100px;
    text-shadow: text-shadow(
        $y: 1px,
        $stepY: 1px,
        $color: #ccc,
        $count: 6
    ), text-shadow(
        $y: 10px,
        $stepY: 1px,
        $blur-radius: 10px,
        $color: rgba(0, 0, 0, .04),
        $count: 6
    ), text-shadow(
        $x: get-function("plastic-x"),
        $y: get-function("plastic-y1"),
        $color: red,
        $count: 120
    ), text-shadow(
        $x: get-function("plastic-x"),
        $y: get-function("plastic-y2"),
        $color: darkred,
        $count: 150
    );
}
outline
<div class="outline"></div>
@import "shadow-scss";

@function outline-x($i, $count) {
    @return if($i == 1 or $i == 4, -1, 1) * 1px;
}

@function outline-y($i, $count) {
    @return if($i < 3, -1, 1) * 1px;
}

.outline {
    color: #fff;
    font-size: 90px;
    font-family: "Poppins";
    font-weight: 900;
    text-shadow: text-shadow(
        $x: get-function("outline-x"),
        $y: get-function("outline-y"),
        $count: 4
    );
}
<div class="navbar">
    <a href="#!" class="item">
        <div class="item-main">
            <svg viewBox="0 0 24 24"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>
        </div>
    </a>
    <a href="#!" class="item">
        <div class="item-main">
            <svg viewBox="0 0 24 24"><path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg>
        </div>
    </a>
    <a href="#!" class="item">
        <div class="item-main">
            <svg viewBox="0 0 24 24"><path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" /></svg>
        </div>
    </a>
    <a href="#!" class="item">
        <div class="item-main">
            <svg viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" /></svg>
        </div>
    </a>
</div>
@use "sass:math";
@import "shadow-scss";

.navbar {
    margin-top: 18px;
    display: flex;
    background: #000;
    height: 72px;
    border-radius: 12px;
    .item {
        .item-main {
            position: relative;
            display: flex;
            background: #000;
            top: 0;
            left: 0;
            width: 72px;
            height: 72px;
            transition: top .3s, left .3s, box-shadow .3s, background .3s;
            svg {
                margin: auto;
                fill: #fff;
                height: 36px;
            }
        }
        &:first-child .item-main {
            border-radius: 12px 0 0 12px;
        }
        &:last-child .item-main {
            border-radius: 0 12px 12px 0;
        }
    }

    $h: math.floor(math.div($navbar-item-count, 2));
    $a: if($navbar-item-count % 2 == 0, 0, -1);

    @for $i from 1 through $navbar-item-count {

        $left: 0;
        $z-index: 0;

        @if($i <= $h) {
            $left: -1px * $max-shift * math.div(($h - $i + 1), $h);
            $z-index: $i;
        } @else if($i >= $navbar-item-count - $h + 1) {
            $left: 1px * $max-shift * math.div(($i - $h + $a), $h);
            $z-index: $navbar-item-count - $i;
        }

        .item:nth-child(#{$i}) {
            .item-main {
                z-index: $z-index;
            }
            &:hover {
                .item-main {
                    background: #2196f3;
                    left: $left;
                    top: -1px * $max-shift;
                    box-shadow: box-shadow(
                        $color: #0a6ebd,
                        $stepX: math.div(math.div($left, 1px), $max-shift) * -1px,
                        $stepY: 1px,
                        $count: $max-shift
                    );
                }
            }
        }
    }
}