Shadows

Neumorphism shadows

These different shadows are the main feature of neu-axentix. They will allow you to create any component with a neumorphism design. Note that you need to add your neumorphism theme color class to an element before adding a shadow class to any child.

Flat shadow

Create an element with a flat shadow using the neu-flat class.

I'm in a flat element

Pressed shadow

Create an element with a pressed shadow using the neu-pressed class.

I'm in a pressed element

Bordered shadow

Create an element with a bordered shadow using the neu-bordered class.

I'm in a bordered element

Concave shadow

Create an element with a concave shadow using the neu-concave class.

I'm in a concave element

Large and small shadows

The large and small shadows allow you to choose the shadow you like the most.
To use them, you just have to add the .neu-small or .neu-large class. The large shadow are really large, so we recomment to space them with the other elements.

Small neu-flat

Neu-flat

Large neu-flat

Dynamic shadows

Mode name Description
clicked Change the neumorphic class when the element is clicked.
Click again to reset the neumorphic class.
click Change the neumorphic class when the mouse is pressed on the element.
Release the click to reset the neumorphic class.
hover Change the neumorphic class when the element is hovered.
Stop hovering the element to reset the neumorphic class.
focus Change the neumorphic class when the element is focused.
Stop focusing the element to reset the neumorphic class.

Examples

  1. The first button has a data-neu-click set to the .neu-pressed class, so when we hold the click on it, the .neu-pressed class will switch with his .neu-flat class.

  2. The second button has a data-neu-clicked set to the .neu-pressed class, so when we click on it, the .neu-pressed class will switch with his .neu-flat class.
    By clicking on it again, they will switch again.

  3. The third button has a data-neu-hover set to the .neu-pressed, so it will switch to this shadow once hovered.

  4. The forth example is an input, it has a data-neu-focus set to the .neu-pressed, so it will switch to this shadow once focused.