WidgetCraftGet the appAesthetic styles
Glass and transparent widgets for Android
Translucent panels with a thin light border over a colorful wallpaper. Glass widgets look like frosted panes floating over the wallpaper. Android widgets cannot blur what is behind them, so the effect comes from a translucent white fill, a thin bright border and a soft, colorful wallpaper.
Also known as: glassmorphism widgets, transparent widgets, frosted glass widgets, translucent widgets.
Glass widget recipes
Each recipe has a preview, exact colors and layer-by-layer steps.
Glass clock widgetFree to build
Glass analog clock widgetFree to build
Glass calendar widgetData needs Pro
Glass battery widgetFree to build
Glass countdown widgetFree to build
Glass to-do list widgetFree to build
Glass photo widgetFree to build
Glass quote widgetFree to build
Glass music widgetData needs Pro
Glass year progress widgetFree to build
Glass step counter widgetData needs Pro
Glass habit tracker widgetFree to build
Glass sticky note widgetFree to build
Glass world clock widgetFree to build
Glass date widgetFree to buildThe glass palette
- Frost (white 25%)
#FFFFFFBackground - Highlight (white 40%)
#FFFFFFSurface and tracks - White
#FFFFFFText - Mist
#E6ECFFLabels - White
#FFFFFFAccent
Design rules
- Text: Use white text at full opacity; it must stay readable over any part of the wallpaper.
- Numbers: Keep numbers white and medium weight, with labels at about 80% opacity.
- Bars and rings: Draw tracks as white at 25% opacity and progress as solid white.
- Photos: Give photos the same rounded corners and a 1 point white border at 40% opacity.
- Lists: Separate rows with white lines at 20% opacity.
Do
- Set the background to white at 20 to 30% opacity.
- Add a 1 point white outline at about 40% opacity.
Avoid
- Do not expect real blur; choose an already soft wallpaper instead.
- Do not use dark text unless the wallpaper is very light.
Wallpaper and icons
A blurred gradient or out-of-focus photo. Sharp, detailed wallpapers make glass text hard to read.
White glyph icons or a translucent icon pack.
Questions
What colors suit glass widgets?
Start with Frost (white 25%) (#FFFFFF) for the background, White (#FFFFFF) for text and White (#FFFFFF) as the accent.
Which font works for glass widgets?
Use built-in Sans, at weight 500.
Does WidgetCraft have glass widgets ready to use?
There is no ready-made glass 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.