Neumorphism for Kustom Apps
Neumorphism for Kustom Apps
Learn to use and make Neumorphic components in Kustom apps suite.
Embedded Files
Elevation
Elevation
Opacity intensity for shadows: sweet spot is between 10 and 20.
Distance for the shadows: sweet spot is below 10.
Blur for the shadows: changes based on the size of the card - @200kp width, 100 blur
Light
Light
Opacity intensity for the overlay: sweet spot is somewhere around 10.
For the direction of the light there are 4 anchor options: Top Left, Top Right, Bottom Left and Bottom Right.
There are 2 effects for the overlay: Concave and Convex
Neumorphic Card Group
Neumorphic Card Group
Each card is built out of 4 shapes (bottom to top):
Shadow
Highlight
Color
Overlay
Together all the shapes form a complete three-dimensional card. The complete settings for each shape are written below.
1. Shadow
1. Shadow
SHAPE:
square/rectangle/circle/oval/triangle/rtriangle/exagon/slice/arc
Width = custom
Height = custom
Corner Radius = custom
Rotation = None
PAINT:
Style = Fill
Color = #00FFFFFF = transparent
Filter = Normal
FX:
Mask = None
Texture = None
Shadow = Outer
Blur = based on elevation
Direction = formula, based on light
$if(gv(anchor)~=Top Left, 315,
gv(anchor)~=Top Right, 225,
gv(anchor)~=Bottom Left, 45,
gv(anchor)~=Bottom Right, 135)$
Distance = based on elevation
Color = 50% shadow color
POSITION:
Anchor = Center
LPadding = depends on the object
RPadding = depends on the object
TPadding = depends on the object
BPadding = depends on the object
It's best if Padding is the same on all sides.
2. Highlight
2. Highlight
SHAPE:
Shape = same as before
Width = same as before
Height = same as before
Corner Radius = same as before
Rotation = None
PAINT:
Style = Fill
Color = #00FFFFFF = transparent
Filter = Normal
FX:
Mask = None
Texture = None
Shadow = Outer
Blur = same as before
Direction = formula, based on light
$if(gv(anchor)~=Top Left, 135,
gv(anchor)~=Top Right, 45,
gv(anchor)~=Bottom Left, 225,
gv(anchor)~=Bottom Right, 315)$
Distance = same as before
Color = 50% white color
POSITION:
Anchor = Center
LPadding = same as before
RPadding = same as before
TPadding = same as before
BPadding = same as before
3. Color
3. Color
SHAPE:
Shape = same as before
Width = same as before
Height = same as before
Corner Radius = same as before
Rotation = None
PAINT:
Style = Fill
Color = custom = same as BG
Filter = Normal
FX:
Mask = None
Texture = None
Shadow = None
POSITION:
Anchor = Center
LPadding = same as before
RPadding = same as before
TPadding = same as before
BPadding = same as before
4. Overlay
4. Overlay
The overlay is optional. Use to add a Concave or Convex effect to the shape.
SHAPE:
Shape = same as before
Width = same as before
Height = same as before
Corner Radius = same as before
Rotation = None
PAINT:
Style = Fill
Color = 50% white
Filter = Normal
FX:
Mask = None
Texture = Radial Gradient
Color = 50% shadow color
Width = 100
Offset = 50
CenterX = formula, based on effect
$if(gv(effect)~=Concave,
if(gv(anchor)~=Left, 0,
gv(anchor)~=Right, 100),
gv(effect)~=Convex,
if(gv(anchor)~=Left, 100,
gv(anchor)~=Right, 0))$
CenterY = formula, based on effect
$if(gv(effect)~=Concave,
if(gv(anchor)~=Top, 0,
gv(anchor)~=Bottom, 100),
gv(effect)~=Convex,
if(gv(anchor)~=Top, 100,
gv(anchor)~=Bottom, 0))$
Shadow = None
POSITION:
Anchor = Center
LPadding = same as before
RPadding = same as before
TPadding = same as before
BPadding = same as before
Learn more
Learn more
Read more about Neumorphism Soft UI and Kustom
Page updated
Google Sites
Report abuse