Neumorphism SCSS utilities (Experimental)

Blue Web comes with dist/neu.scss containing some SCSS and CSS utilities to make it easy to apply shadow effects. The effects can have some weird side-effects, that’s why they are not included by default with dist/style.scss. You have to embed it yourself.

Getting started

1. Import neu.css in your main SCSS file:

   @import "~blue-react/dist/neu";
   

2. Apply the mixin “neu()” at the area you want to use it:

   :root {
       @include neu(#610dfd);
   }
   

   First parameter takes the areas’s background color. As second parameter you can set the background color for inset.

Utility classes

The notation looks like this: .neu-shadow{-inset?}{-switch?}{-size}

• Where inset is optional. When you set it, the box-shadow will be set to the inside.
• Where switch is optional. When you set it, the light and dark shadow colors will be switched. Can only be used together with inset!
• Where size is required and one of:
  • 1 - distance and blur values multiplied with .25
  • 2 - distance and blur values multiplied with .5
  • 3 - distance and blur values multiplied with 1
  • 4 - distance and blur values multiplied with 1.5
  • 5 - distance and blur values multiplied with 3

Format and the values are inspired by Bootstrap.

Combining classes

You can combine shadows with inset shadows like this:

<section class="bg-body">
    <div
        class="neu-shadow-5 neu-shadow-inset-switch-3"
        style="width: 400px; height: 200px; border-radius: 1rem; margin: 2rem;"
    ></div>
</section>

.bg-body {
    @include neu($body-bg, $body-bg);
}

@include color-mode(dark) {
    .bg-body {
        @include neu($body-bg-dark, $body-bg-dark);
    }
}

CSS variables

You can use Neu’s CSS variables and combine them like this:
style="var(--neu-shadow-3), var(--neu-shadow-inset-switch-1)"

The notation is similar to the Utility classes.

Examples

You can combine shadows to different soft effects.

<section class="bg-body">
    <div class="my-5 rounded-5 p-4 mx-4" style="box-shadow: var(--neu-shadow-5), var(--neu-shadow-inset-switch-1);">
        Neumorph card<br />
        <button
            class="btn btn-lg btn-primary mt-3 rounded-4"
            style="var(--neu-shadow-4), var(--neu-shadow-inset-switch-3)"
        >
            Click me
        </button>
    </div>
</section>