@wonderflow/react-components/core/utils/elevation.css

UI components from Wonderflow's Wanda design system

@define-mixin elevation-1 $color: 0deg 0% 0% {
  box-shadow:
    0 3px 13px hsl($color / 6%),
    0 2.5px 4.59px hsl($color / 4.06%),
    0 1.34px 2.45px hsl($color / 2.35%),
    0 0.75px 1.37px hsl($color / 4%),
    0 0.39px 0.73px hsl($color / 1.65%),
    0 0.16px 0.3px hsl($color / 0.94%);
}
@define-mixin elevation-2 $color: 0deg 0% 0% {
  box-shadow:
    0 9px 25px hsl($color / 8%),
    0 3.75px 10.44px hsl($color / 6.35%),
    0 2.01px 5.58px hsl($color / 4.75%),
    0 1.12px 3.13px hsl($color / 4.5%),
    0 0.6px 1.66px hsl($color / 4.25%),
    0 0.25px 0.69px hsl($color / 3.65%);
}
@define-mixin elevation-3 $color: 0deg 0% 0% {
  box-shadow:
    0 18px 40px hsl($color / 9%),
    0 7.51px 16.71px hsl($color / 5.63%),
    0 4.02px 8.93px hsl($color / 4.15%),
    0 2.25px 5px hsl($color / 4%),
    0 1.19px 2.66px hsl($color / 3.85%),
    0 0.49px 1.1px hsl($color / 3.37%);
}
@define-mixin elevation-4 $color: 0deg 0% 0% {
  box-shadow:
    0 33px 78px hsl($color / 11%),
    0 12.04px 28.47px hsl($color / 7.59%),
    0 5.84px 13.82px hsl($color / 6.12%),
    0 2.86px 6.77px hsl($color / 4.88%),
    0 1.13px 2.67px hsl($color / 5.41%);
}