Looks & effects
Everything about how an item looks is under Properties → Design. You can build glows, glass cards, gradient headlines and faded photos with the controls alone - no code.
Fill
Properties → Appearance → Fill sets what's behind the item's content. It works the same for every item, frames included.
| Fill | What you get |
|---|---|
| None | See-through. |
| Colour | One colour, with an opacity - lower it to let what’s behind show through. |
| Gradient | Colours that blend into each other (see below). |
| Image | A picture from a web address, covering the whole item. |
The gradient editor
Kind
Straight (linear) blends in one direction - set its Angle (180 = top to bottom, 90 = left to right). Round (radial) blends outwards from a centre point - set Centre X and Y in %.
Stops
Each stop is a colour, its opacity, and where it sits along the gradient (0-100%). Add as many as you like; you need at least two.
Opacity 0
Fades into see-through. This is how soft glows, spotlights and fades over photos are made.
The same editor is used for the page background, box fills and gradient text.
Text looks
Properties → Text, below the colour and size:
| Control | What it does |
|---|---|
| Letter spacing | Space between letters, in px. Negative values tighten big headlines; small positive values suit capitals. |
| Capitals | Show the text in capitals (or lowercase, or Each Word Capitalised) without retyping it. |
| Italic (whole box) | Slants all the text. For single words, use the formatting bar instead. |
| Keep on one line | Stops the text wrapping onto a new line. |
| Letter fill → Gradient | Paints a gradient inside the letters. The box can’t also have its own fill while this is on. |
| Outline | A line around every letter, with its own colour. For hollow letters, give the letter fill a gradient whose stops are all at 0% opacity. |
Effects
Properties → Effects (folded - click to open):
| Effect | How to use it |
|---|---|
| Shadow | Start from Soft, Medium, Strong, Glow or Inset, then adjust Across, Down, Blur, Spread, colour and opacity. A glow is a shadow with no offset and a bright colour. Tick “Inside the box” for a pressed-in look. |
| Blur | Softens the whole item - good for background shapes and out-of-focus layers. |
| Blur what’s behind | Frosts whatever shows through the item. Needs a see-through fill (colour opacity below 100%). The Glass effect in Appearance is a ready-made version. |
| Shape | Cuts the item into a circle, oval, triangle, diamond, hexagon, star, arrow or slanted edge. It cuts off anything outside the shape, including the shadow. |
| Fade edges | Fades the item out at the bottom, top, both, the sides, or all round. Fade length sets how much of the item the fade takes up. |
Liquid glass
Properties → Liquid glass turns any item into a piece of curved glass. Whatever is behind it is magnified and bent by the curve - strongest at the rim, like the edge of a thick lens - and light plays across its surface: a bright lit edge, a shaded underside, a gloss across the top and a small specular hotspot.
| Setting | What it does |
|---|---|
| Glass (preset) | Glass slab (curved edges), Bubble (a full dome - a crystal ball when the item is a circle), Clear, Frosted, Dark glass. Every setting below stays adjustable. |
| Curvature | How much of the shape is curved: low is a flat pane with rounded edges, all the way up is a dome. |
| Bending | How strongly the curve bends what is behind. |
| Frost, Colour boost | Blur and saturation of what is behind. |
| Colour fringing | A prism edge - red and blue split slightly at the rim. |
| Surface light, Light follows the pointer | How bright the highlights are, and whether the hotspot moves with the visitor’s pointer. |
| Tint | A colour laid over the glass, and how strong it is. |
- It shows what is behind the item, so put it over something detailed - a photo, a gradient or a 3D scene - with the item's Fill set to None and rounded corners (make a square item fully rounded and choose Bubble for a glass ball).
- For a glass card, add a frame behind a group of items (image, title, text) and give the frame the glass; set its layer just below them.
- Check text contrast: white text over glass can disappear when something bright passes behind. The Frosted or Dark glass presets, or a stronger tint, keep it readable.
- The bending shows in Chrome and Edge; Safari and Firefox show the frosted, lit glass without it.
Recipes
| Look | How |
|---|---|
| Soft coloured glow blob | A frame or empty text box → Fill: Gradient, Round, first stop your colour at 60% opacity, last stop the same colour at 0%. Add Effects → Blur 20px. Optionally Animate → Loop: Float. |
| Frosted glass card | A frame → Appearance → Glass effect. Or Fill: Colour white at 12% opacity, Effects → Blur what’s behind 16px, a 1px border, corners 16px. |
| Gradient headline | Big bold text → Text → Letter fill: Gradient. Tighten Letter spacing to -1 or -2px. |
| Photo that fades into the page | An image → Effects → Fade edges: Fade out at the bottom, Fade length 40%. |
| Circular badge that slowly turns | Text in a square box → Effects → Shape: Circle → Animate → Loop: Spin, 20s. |
Every control writes ordinary CSS, which you can see under Advanced (custom CSS) at the bottom of the Design tab. For anything the controls don't cover yet, see Custom CSS.