WidgetCraftGet the app

Neumorphic · Photo · 4 × 2 widget

Neumorphic photo widget

By the WidgetCraft team · Updated

A neumorphic photo widget frames a favorite picture with a short caption. Soft, raised shapes that look pressed out of the background. This page gives the exact colors, type settings and layers, with a preview drawn from the same values.

Neumorphic photo widget design preview: Soft, raised shapes that look pressed out of the background.
Design preview drawn from the recipe below. Example values are shown; your widget uses live data.

What a neumorphic photo widget shows

A photo widget puts a person, place or pet on the home screen without making it the wallpaper. The frame, the crop and the caption decide whether it feels designed or just pasted in.

You pick the picture with Android's photo picker, so WidgetCraft needs no storage permission, and the photo stays on your phone. It is a free element.

How the neumorphic style shapes it

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.

Neumorphic photo widget recipe

LayerSettings
Canvas360 × 200, background #E6EAF0, corner radius 28, soft shadow radius 12 at low opacity
Layoutphoto on the left, caption on the right
Image190 × 160, corner radius 20, crop to fill
Textplace label, size 12, color #8B93A5
Textcaption in two lines, built-in Sans, size 24, color #3B4252
Shaperule 28 × 3 in #5B7CFA
Textdate, size 12, color #8B93A5
Fontbuilt-in Sans
Home screen size4 × 2 cells

Neumorphic color palette

How to make a neumorphic photo widget in WidgetCraft

  1. Create a widget and open Canvas. Set the size to 360 × 200, the background to #E6EAF0 and the corner radius to 28.
  2. Tap Add and choose Image. Pick your photo, size it to 190 × 160 and set crop to fill.
  3. Set the image corner radius to 20. Drag the crop so the subject is centered.
  4. Add a Text caption at size 24 in #3B4252 using built-in Sans.
  5. Add a small place label above and a date below, both at size 12 in #8B93A5, with a short rule in #5B7CFA between them.
  6. Tap Save, then Add to home screen and resize the widget on your launcher if needed.

Everything in this recipe works in the free version.

Tips for neumorphic photo widgets

Questions about the neumorphic photo widget

What size is a neumorphic photo widget?

It is designed for 4 × 2 home screen cells on a 360 × 200 canvas. You can resize it on the launcher and the design scales in proportion.

Which colors does it use?

Clay grey (#E6EAF0) for the background, Slate ink (#3B4252) for the main text, Fog (#8B93A5) for labels and Soft blue (#5B7CFA) as the accent.

Is it free to make?

Yes. Photo widgets use free features in WidgetCraft, and the neumorphic styling is free too.

What else is this style called?

People also search for neumorphism photo widget, soft ui photo widget, 3d soft photo widget. They describe the same look as this neumorphic photo widget.

More neumorphic widgets

Photo widgets in other styles