WidgetCraftGet the appAesthetic styles
Neumorphic widgets for Android
Soft, raised shapes that look pressed out of the background. Neumorphic widgets appear moulded from the same material as the background. Shapes are the same color as the surface and are defined only by a soft light edge and a soft shadow.
Also known as: neumorphism widgets, soft ui widgets, 3d soft widgets.
Neumorphic widget recipes
Each recipe has a preview, exact colors and layer-by-layer steps.
Neumorphic clock widgetFree to build
Neumorphic analog clock widgetFree to build
Neumorphic calendar widgetData needs Pro
Neumorphic battery widgetFree to build
Neumorphic countdown widgetFree to build
Neumorphic to-do list widgetFree to build
Neumorphic photo widgetFree to build
Neumorphic quote widgetFree to build
Neumorphic music widgetData needs Pro
Neumorphic year progress widgetFree to build
Neumorphic step counter widgetData needs Pro
Neumorphic habit tracker widgetFree to build
Neumorphic sticky note widgetFree to build
Neumorphic world clock widgetFree to build
Neumorphic date widgetFree to buildThe neumorphic palette
- Clay grey
#E6EAF0Background - Shade
#DCE1EASurface and tracks - Slate ink
#3B4252Text - Fog
#8B93A5Labels - Soft blue
#5B7CFAAccent
Design rules
- Text: Use a mid-dark slate for text; pure black looks pasted on.
- Numbers: Center the number in slate and keep it semi-bold.
- Bars and rings: Draw rings and bars as the same grey with a soft shadow, with a small blue fill.
- Photos: Avoid photos or use a small round one inset like a button.
- Lists: Place rows on slightly darker pills with soft shadows.
Do
- Make the widget background match the wallpaper color exactly.
- Use shadow radius 10 to 14 with low opacity.
Avoid
- Do not use hard outlines.
- Do not use it over a photo wallpaper; the illusion needs a flat color.
Wallpaper and icons
A flat wallpaper in exactly the same grey as the widget.
Soft grey rounded icons or a neumorphic pack.
Questions
What colors suit neumorphic widgets?
Start with Clay grey (#E6EAF0) for the background, Slate ink (#3B4252) for text and Soft blue (#5B7CFA) as the accent.
Which font works for neumorphic widgets?
Use built-in Sans, at weight 600.
Does WidgetCraft have neumorphic widgets ready to use?
There is no ready-made neumorphic pack at the moment. Each recipe on this page lists the exact settings to build one in a few minutes, and most use only free features.