Filter
Colour filters and blend modes for its object.
Colour filters
Filter changes how its object looks without changing the object: grayscale, sepia, invert and saturate take 0 to 1 (or more), brightness and contrast take 1 for unchanged, hueRotate an angle, and blur a length. Several combine.
Row(
.config(gap: 12)
Container(
.config(
w: 140
h: 90
color: LinearGradient(.colors(ember, gold, teal))
cornerRadius: 12
)
)
Filter(
.config(grayscale: 1)
.obj(
Container(
.config(
w: 140
h: 90
color: LinearGradient(.colors(ember, gold, teal))
cornerRadius: 12
)
)
)
)
Filter(
.config(hueRotate: 140deg)
.obj(
Container(
.config(
w: 140
h: 90
color: LinearGradient(.colors(ember, gold, teal))
cornerRadius: 12
)
)
)
)
)Blending with what is behind
blend mixes the object with what is under it: multiply darkens, screen lightens, difference inverts where they overlap. The circles sit on a white card so the blend reads the same in every theme.
Stack(
.config(w: 260, h: 160, color: white, cornerRadius: 14, padding: all(20))
Container(.config(size: 120, color: teal, cornerRadius: 999))
Position(
.config(left: 100, top: 20)
.obj(
Filter(
.config(blend: multiply)
.obj(Container(.config(size: 120, color: ember, cornerRadius: 999)))
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
grayscale | num | 0–1. | |
blur | len | Blur radius. | |
brightness | num | 1 is unchanged. | |
contrast | num | 1 is unchanged. | |
saturate | num | 1 is unchanged. | |
hueRotate | angle | Hue rotation. | |
invert | num | 0–1. | |
sepia | num | 0–1. | |
blend | normal | multiply | screen | overlay | darken | lighten | difference | exclusion | color | luminosity | Blend mode with what is behind. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Slots
.obj: one object, the default slot