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.
Pressed shadow
The pressed shadow is a neumorphic shadow which makes an element looks pressed in relief.
Bordered shadow
The bordered shadow is a neumorphic shadow which makes an element looks bordered in relief.
Concave shadow
The concave shadow is a neumorphic shadow which makes an element looks concave.
We recommend using it on specific elements like buttons.
Convex shadow
The convex shadow is a neumorphic shadow which makes an element looks convex.
We recommend using it on specific elements like buttons.
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.