Skip to content

WidgetCraftGet the app

Neumorphic · To-do list · 4 × 2 widget

Neumorphic to-do list widget

By the WidgetCraft team · Updated November 13, 2026

A neumorphic to-do list widget keeps today's tasks on your home screen with boxes you can tick. 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 to-do list 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 to-do list widget shows

A to-do widget works when it is short. Three tasks, a clear title and a box to tap are enough; a long list belongs in an app.

WidgetCraft stores local tasks on the phone, which is a free source and needs no account or permission. Tapping a row can tick the task from the home screen.

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.

Lists: Place rows on slightly darker pills with soft shadows.
Text: Use a mid-dark slate for text; pure black looks pasted on.

Neumorphic to-do list widget recipe

Layer	Settings
Canvas	360 × 200, background #E6EAF0, corner radius 28, soft shadow radius 12 at low opacity
Text	title "Today", built-in Sans, size 22, color #3B4252
Text	count such as "1 of 3", size 12, color #8B93A5, right aligned
List	local tasks, 3 rows, row height 38, text size 16 in #3B4252
Checkbox	18 × 18, radius 9, outline #8B93A5; done state filled #5B7CFA
Done rows	text #8B93A5 with strikethrough
Font	built-in Sans
Home screen size	4 × 2 cells

Neumorphic color palette

Clay grey #E6EAF0Background
Shade #DCE1EASurface and tracks
Slate ink #3B4252Text
Fog #8B93A5Labels
Soft blue #5B7CFAAccent

How to make a neumorphic to-do list widget in WidgetCraft

Create a widget and open Canvas. Set the size to 360 × 200, the background to #E6EAF0 and the corner radius to 28.
Add a Text layer for the title "Today" at size 22 in #3B4252.
Tap Add and choose List. In Data, choose your local task list and limit it to three rows.
Set the row text to size 16 in #3B4252 and the checkbox to 18 × 18 with radius 9.
Style finished rows in #8B93A5 and set the tick color to #5B7CFA. In Tap, set a row tap to tick the task.
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 to-do list widgets

Make the widget background match the wallpaper color exactly.
Use shadow radius 10 to 14 with low opacity.
Limit the list to three or four rows so each stays easy to tap.
Make finished tasks visibly different: grey text and a strikethrough.
Tap targets on a widget should be at least 48 dp high.
Do not use hard outlines.
Do not use it over a photo wallpaper; the illusion needs a flat color.

Questions about the neumorphic to-do list widget

What size is a neumorphic to-do list 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. To-do list widgets use free features in WidgetCraft, and the neumorphic styling is free too.

What else is this style called?

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

More neumorphic widgets

To-do list widgets in other styles