Utilities » Mixins Box ShadowLink
Since: 1.0.0 New IssueA mixin for box-shadow. Takes care of browser prefixes for you. You should always use this mixin when writing box-shadow rules to ensure you're compatible with the browsers we support. Supports multiple shadows, just use the same syntax as you would CSS.
More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Examples
Create a large, subtle shadow to help a callout stand out against a complicated background, like a background photo.
.feature-callout {
@include box-shadow( 0px 0px 40px 0px rgba( 0, 0, 0, 0.25 ) );
}
Create a fancy button with an inset highlight and a shadow around it to help it stand out on a background.
.fancy-button {
@include box-shadow(
inset 0 2px 0px rgba( 255, 255, 255, 0.25 ),
0px 0px 10px 0px rgba( 0, 0, 0, 0.25 )
);
}
_mixins.scss, line 127
View Source