Widgets Guide: Style side boxes and cards (without chaos)
Widgets are the boxes around your content: side panels, info cards, and “module” containers.
This section lets you make them feel premium (glass, clean cards, or retro panels) without breaking readability.
📸 What you’ll see in Widgets
This matches the Widgets section on the Settings screen.
✅ What Widgets controls (and what it doesn’t)
- Controls: widget/card boxes, their titles, borders, padding, blur, opacity, shadow.
- Doesn’t control: your page background (Background), main block color (Colors), buttons (Buttons), links (Links), feed posts (Activity).
Think of it like this:
Colors = your main “surfaces.” Widgets = the “frames” around content.
If widgets look clean, the whole profile feels more intentional.
Colors = your main “surfaces.” Widgets = the “frames” around content.
If widgets look clean, the whole profile feels more intentional.
🎛 Widgets settings (field-by-field)
- Widget Title Color — title text inside widget boxes.
- Widget Background Color — the base paint for widget boxes.
- Widget Background Opacity — transparency level (glass effect). Tip says try 70% first.
- Widget Blur Strength — frosted-glass blur behind widget boxes (your UI tip: start 8px–12px).
- Widget Border Color — border color around widgets.
- Widget Border Style — border style (Solid is the modern safe pick).
- Widget Border Radius — corner roundness (0px = sharp, 12px = modern).
- Widget Inner Padding — spacing inside widgets (huge for “premium” feel).
- Widget Shadow Strength — depth/glow under widgets.
Most underrated setting here:
Widget Inner Padding. If your widgets feel cramped, raise padding before changing colors.
Widget Inner Padding. If your widgets feel cramped, raise padding before changing colors.
🔺 The Widget Triangle (Background + Opacity + Blur)
If widgets look “off,” it’s usually these three settings fighting each other.
🎨 Background Color
Your base widget paint. Keep it in the same family as your overall surface colors.
🫧 Opacity
How “glassy” the widget is. Higher = more readable. Lower = more risky.
🌫 Blur Strength
Frosted glass effect. Start around 8px–12px if you’re using blur.
Fog warning zone:
Low opacity + high blur + busy background image = “why does everything look like soup?”
If that happens: lower blur first, then raise opacity.
Low opacity + high blur + busy background image = “why does everything look like soup?”
If that happens: lower blur first, then raise opacity.
🎨 3 copyable widget styles
Pick one style and commit. Mixing styles is how “visual chaos” is born.
🧊 Style A: Modern Glass
- Widget Background Color: deep navy/charcoal
- Widget Background Opacity: 75–85%
- Widget Blur Strength: 8px–12px
- Widget Border Color: subtle accent tint
- Border Radius: 12px
- Inner Padding: 16px
- Shadow Strength: Low–Medium
✅ Style B: Clean Cards
- Widget Background Color: off-white / light gray
- Widget Background Opacity: 100%
- Widget Blur Strength: None
- Widget Border Color: light neutral
- Border Radius: 8–12px
- Inner Padding: 16–20px
- Shadow Strength: Low (or none if borders are clear)
📼 Style C: Retro Panels
- Widget Background Color: pale gray/white (or terminal-black)
- Widget Background Opacity: 100%
- Widget Blur Strength: None
- Widget Border Color: stronger contrast border
- Border Radius: 0px
- Inner Padding: 12–16px
- Shadow Strength: None or Low
Best “finished look” button:
Raise Widget Inner Padding to a comfortable value, then keep colors simple.
Padding makes everything feel designed.
Raise Widget Inner Padding to a comfortable value, then keep colors simple.
Padding makes everything feel designed.
🛠 Troubleshooting (fast fixes)
- Muddy / hard to read: lower Blur Strength, raise Opacity, then adjust background color for contrast.
- Widgets blend into the page: add a subtle Border Color or low Shadow Strength.
- Titles are unreadable: change Widget Title Color first (don’t redo everything).
- Looks heavy on mobile: reduce blur (blur is usually the performance culprit).
- Widgets feel like a different site: match Widget Background Color to your main surface (or 1 shade different).
