Neumorphic shadows

The buttons are working with all the different neumorphic classes. They need to have a neumorphic parent to get the neumorphic shadow to apply.

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

Flat shadow

The flat shadow is a neumorphic shadow which makes an element looks flat.

I'm in a flat div

Pressed shadow

The pressed shadow is a neumorphic shadow which makes an element looks pressed in relief.

I'm in a pressed div

Bordered shadow

The bordered shadow is a neumorphic shadow which makes an element looks bordered in relief.

I'm in a bordered div

Concave shadow

The concave shadow is a neumorphic shadow which makes an element looks concave.
We recommend using it on specific elements like buttons.

I'm in a concave div

Convex shadow

The convex shadow is a neumorphic shadow which makes an element looks convex.
We recommend using it on specific elements like buttons.

I'm in a convex div

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

Lighten & darken shadows

You may want to use lighten or darken variants of the shadows and elements colors.
You can make it by adding the .neu-lighten or .neu-darken class to the element already containing a shadow class.

Lighten neu-flat

Neu-flat

Darken 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

Here, 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.
The second button has a data-neu-clicked set to the .neu-pressed class, so when click on it, the .neu-pressed class will switch with his .neu-flat class. By clicking on it again, they will switch again.
This is working with every shadow class.