Skip to content

Instantly share code, notes, and snippets.

@wingleung

wingleung/Neuromorphism (soft ui) sass mixin

Last active October 11, 2021 11:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wingleung/b0605296286ef18a6cd91c06177d3379 to your computer and use it in GitHub Desktop.
Save wingleung/b0605296286ef18a6cd91c06177d3379 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Neuromorphism (soft ui) sass mixin
@mixin neumorphism($background) {
$highlight: lighten($background, 4%);
$lowlight: darken($background, 4%);
$shadowhigh: lighten($background, 9%);
$shadowlow: darken($background, 9%);
background: linear-gradient(145deg, $highlight, $lowlight);
box-shadow: 2em 2em 4em $shadowlow, -2em -2em 4em $shadowhigh;
}
@wingleung
Copy link
Author

wingleung commented Jan 17, 2020 •
edited

Demo: https://codesandbox.io/s/neumorphism-sass-mixin-kzc1o

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment