GUI background
Backdrop colour, gradients, presets, and a fully positionable background image.
When you have nothing selected on the canvas, the Inspector switches to the GUI background — a full-screen backdrop that sits behind your entire design. It's saved per design and travels with your export, so every part of your dx GUI has a consistent stage to sit on. This page walks through every section and control, and spells out exactly which pieces ship in your export and which are preview-only polish.
To open these controls, click empty canvas so nothing is selected — the Inspector then shows the GUI background instead of an element's properties.
What the GUI background is
The GUI background is a single backdrop layer that renders behind the whole design. It is stored per design and exported with it, so it isn't a global editor preference — each design keeps its own backdrop. It's built from four stacked layers you control independently: a solid backdrop colour, a gradient, a background image, and a pair of frosted & grain accents.
Backdrop
The Backdrop section is the base fill behind everything else.
- Enable — turns the backdrop layer on or off.
- Base colour — the solid fill colour, with alpha, so you can make it fully opaque, semi-transparent, or clear.
Gradient
The Gradient section paints a colour blend over the backdrop for depth and mood.
- Enable — turns the gradient on or off.
- 2-colour or 3-colour — choose a two-stop or three-stop blend.
- Direction — run the gradient vertical or horizontal.
- Radial (centre glow) — switch to a radial blend that glows from the centre outward instead of a linear direction.
Preset designs
Six one-click preset designs give you a finished gradient instantly. Pick one, then tweak the colours if you like.
Background image
The Background image section lets you import a splash or character image from your PC and place it behind the design. Choose how it fills the screen with a fit mode.
| Fit | What it does |
|---|---|
| Cover | Scales the image to fill the whole screen, cropping overflow to avoid empty edges. |
| Contain | Scales the image to fit fully within the screen, so the entire image is visible. |
| Stretch | Stretches the image to the exact screen dimensions, ignoring its aspect ratio. |
| Free | Hands you full manual control over position and size (see below). |
Free mode
In Free mode you fully control the image's placement with four sliders — Position X, Position Y, Width, and Height — expressed as a percentage of the screen, so the image stays put across different resolutions. Two helper buttons round it out.
- Position X / Position Y — where the image sits, as a % of the screen.
- Width / Height — the image size, as a % of the screen.
- Center — snaps the image back to the middle of the screen.
- Reset — restores the Free-mode position and size.
When you switch to Free, the position and size are seeded from the current fit, so the image doesn't jump — you start exactly where Cover, Contain, or Stretch left it and adjust from there.
Opacity and removing the image
- Opacity — a slider that fades the image in or out over the layers beneath it.
- Remove — clears the imported image from the background.
Frosted & grain
The Frosted & grain section adds two finishing accents — a frosted blur and a noise/grain overlay. These are preview-only: they help you judge the look inside Easelt Builder but are not exported with your design.
What exports vs. what's preview-only
Only some of the GUI background travels into your exported design. Keep this split in mind so previews match the final result.
| Layer | Exports? | Notes |
|---|---|---|
| Backdrop colour | Yes | The base fill, including alpha, ships with the design. |
| Gradient | Yes | Your gradient, preset or custom, is exported. |
| Background image | Yes | The image ships in the assets/ folder alongside the design. |
| Frosted blur | No | Preview-only accent. |
| Grain overlay | No | Preview-only accent. |
The frosted blur and grain overlay are for preview only — they will not appear in your export. Anything you want in-game must live in the backdrop colour, gradient, or image, and the image is written to assets/.