> For the complete documentation index, see [llms.txt](https://monthly-calender-widgets.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://monthly-calender-widgets.gitbook.io/docs/custom-widgets-builder/builder/backgrounds.md).

# Backgrounds (solid/gradient/image)

The background is the foundation of your custom widget's look. The Custom Widget Builder supports three background types, each suited to different design goals.

## 1. Solid color

A single flat color fills the entire widget background.

**How to use:**

* Select **Solid** in the background section of the builder.
* Pick any color using the color picker or enter a hex code.

**Best for:**

* Clean, minimal designs where the calendar content is the focus.
* Maximum text readability -- solid backgrounds provide the highest contrast.
* Matching a specific color from your wallpaper or Home Screen theme.

**Tips:**

* Dark solid backgrounds (black, dark gray, navy) work especially well on OLED screens and save battery.
* Light solid backgrounds (white, cream, light gray) pair well with dark text for a paper-like aesthetic.

## 2. Gradient

Two or more colors blend smoothly across the widget, creating depth and visual interest.

**How to use:**

* Select **Gradient** in the background section.
* Choose your gradient colors (start and end, or multiple stops).
* Configure the gradient direction (start point and end point).

**Best for:**

* Soft, aesthetic widgets that feel more "designed" than a flat color.
* Matching gradients commonly found in iOS wallpapers.
* Creating depth without the complexity of an image background.

**Tips:**

* Use colors that are close in hue for a subtle, elegant gradient (e.g., dark blue to slightly lighter blue).
* Avoid very high-contrast gradients (e.g., white to black) as they can make text hard to read in some areas.
* Test your gradient with the live preview to ensure readability across the entire widget.

## 3. Image background (+ brightness)

Use a photo from your library as the widget background, with a brightness slider to control readability.

**How to use:**- Select **Image** in the background section.

* Tap to choose a photo from your photo library.
* Use the **brightness slider** to darken or lighten the image until text is clearly readable.**Best for:**- Matching your widget to a specific wallpaper or photo.
* Creating unique, personalized widgets that feel like a work of art.
* Seasonal or themed designs (holiday photos, landscapes, patterns).**How it works technically:**- The app saves the chosen image to shared App Group storage so the widget extension can render it.
* When an image background is no longer referenced by any saved custom widget, the app automatically cleans it up to save storage space.
* Images are optimized for widget rendering -- the app handles resizing and compression.**Tips:**- **Always check readability.** After selecting an image, adjust the brightness slider until day numbers, event text, and the month name are clearly visible.
* Busy, high-detail photos can make text hard to read. Try photos with large areas of uniform color (sky, water, solid walls).
* Combine with monochrome mode to reduce visual noise while keeping the image visible.
* If text is still hard to read after adjusting brightness, try increasing the weekday header bar background opacity or cell background opacity to create semi-transparent overlays behind text.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://monthly-calender-widgets.gitbook.io/docs/custom-widgets-builder/builder/backgrounds.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.