neumorphism.scss

According to the Google living style guide
value : 0, 0.5, 1, 2, 3, 4, 6, 8, 9

Includes

@include neumorphism(); // Normal (9)

@include neumorphism(1,6); // Animated

@include neumorphism(6, 1); // Reverse animation

@include neumorphism(1,6,#dc3545, #008a00); // Red on the top, green on the bottom

Example

.card {
  width: 95px;
  height: 95px;
  background: #f4f4f4;
  @include neumorphism(); // No animation
}

.card-animated {
  @include neumorphism(1,3); // Animated
}

.card-red-neumorphism {
  @include neumorphism(1,1,#dc3545); // Red neumorphism
}

.my-svg {
  @include drop-neumorphism(); // For svg or img neumorphism
}

Global variables

$neumorphism-transition : all 250ms !default
$neumorphism-pushOnPress: true !default

Explanation

$neumorphism-transition : the default animation
$neumorphism-pushOnPress : activation of the push effect on :focus