# Effects

> Glow, bloom, glass and opacity as style properties. A native Pyzed component for Python desktop GUIs, with a live preview, code examples and its API.

Source: https://albakore.github.io/pyzed/library/effects/

:::tip[In plain words]
Glows, frosted glass and transparency you can add to any box.
:::

Visual effects are [style](https://albakore.github.io/pyzed/theming/styles/) properties: `glow` (a soft halo), `bloom` (a wide, bright spill of light), `glass` (a translucent, frosted panel), `opacity`, and `translate` and `scale`, which move or scale the drawing without changing the layout. Animations can change `glow` too.

`pz.Style` · Category: [Content](https://albakore.github.io/pyzed/library/#content) · [Full reference →](https://albakore.github.io/pyzed/reference/widgets/#style)

**Code:**

```python
pz.container(pz.row([
    pz.container(ui.label("Glass"), width=150, height=70, padding=14).style(glass=True, radius=12),
    pz.container(ui.label("Glow"), width=150, height=70, padding=14).style(
        background="#0b1220", radius=12, glow=("#22d3ee", 18)),
    pz.container(ui.label("Bloom"), width=150, height=70, padding=14).style(
        background="#1a0b16", radius=12, bloom=("#f472b6", 0.8)),
    pz.container(ui.label("Opacity"), width=150, height=70, padding=14).style(
        background="#0b1220", radius=12, opacity=0.5),
], spacing=24), padding=32).style(
    background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=14)
```

:::note[New]
This component was added recently. Tell us how it works for you in the [issue tracker](https://github.com/albakore/pyzed/issues).
:::

## When to use

- To highlight the primary action or a live state (recording, connected).
- For floating panels over colorful backgrounds (glass).

## Usage

```python
import pyzed as pz
from pyzed import ui

pz.container(pz.row([
    pz.container(ui.label("Glass"), width=150, height=70, padding=14).style(glass=True, radius=12),
    pz.container(ui.label("Glow"), width=150, height=70, padding=14).style(
        background="#0b1220", radius=12, glow=("#22d3ee", 18)),
    pz.container(ui.label("Bloom"), width=150, height=70, padding=14).style(
        background="#1a0b16", radius=12, bloom=("#f472b6", 0.8)),
    pz.container(ui.label("Opacity"), width=150, height=70, padding=14).style(
        background="#0b1220", radius=12, opacity=0.5),
], spacing=24), padding=32).style(
    background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=14)
```

## Variants

:::note[About these captures]
Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site's theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open **Code** under a capture to see the snippet that draws it; free names such as `on_save` stand for your own callbacks.
:::

### Effects

```python
pz.container(pz.container(ui.label("Glass"), width=130, height=60, padding=12).style(glass=True, radius=12),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)
```

```python
pz.container(pz.container(ui.label("Glow"), width=130, height=60, padding=12).style(background="#0b1220", radius=12, glow=("#22d3ee", 18)),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)
```

```python
pz.container(pz.container(ui.label("Bloom"), width=130, height=60, padding=12).style(background="#1a0b16", radius=12, bloom=("#f472b6", 0.8)),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)
```

```python
pz.container(pz.container(ui.label("Opacity"), width=130, height=60, padding=12).style(background="#0b1220", radius=12, opacity=0.5),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)
```

```python
pz.container(pz.container(ui.label("Scale"), width=130, height=60, padding=12).style(background="#0b1220", radius=12, scale=1.15),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)
```

```python
pz.container(pz.container(ui.label("Translate"), width=130, height=60, padding=12).style(background="#0b1220", radius=12, translate=(16, 8)),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)
```

## Events

Effects has no events of its own: it shows what you give it. Like every widget it also has the **18 common events** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), attached with `.on(...)`: see [Events](https://albakore.github.io/pyzed/guides/events/) and [Events of every component](https://albakore.github.io/pyzed/library/events/).

## Properties and API

### `pz.Style`

```python
class Style
```

A reusable set of style properties for `widget.style(...)`, a component's `style=` or `App.style`. Combine styles with `|` (the right one wins). See [Styles](https://albakore.github.io/pyzed/theming/styles/).

| Property | Default | Description |
| --- | --- | --- |
| `*styles` | — | Styles, dicts or style names to start from. |
| `**props` | — | Properties: `background`, `color`, `font`, `weight`, `italic`, `size`, `line_height`, `border_color`, `border_width`, `border` (`(width, color)`), `radius`, `shadow`, `padding`, `margin`, `width`, `height`, `max_width`, `max_height`, `min_width`, `min_height`, `align_x`, `align_y`, `clip`. Effects: `opacity`, `translate` (`(x, y)`, pixels or `"50%"`), `scale`, `glow` (a color, a size or `(color, size)`), `bloom` (a color or `(color, intensity)`) and `glass` (`True`, a tint or `{"tint", "strength"}`). States: `hover`, `pressed` (or `active`) and `focus`, each with the properties to show then. `transition`: milliseconds, `True` or `{"duration", "easing", "delay"}`. `media`: `{query: style}` applied when the window matches. Colors may be theme tokens. |

[Full reference →](https://albakore.github.io/pyzed/reference/widgets/#style)

## Related

- [Animation](https://albakore.github.io/pyzed/library/animation/): Presets, keyframes and transitions for any widget.
- [Card](https://albakore.github.io/pyzed/library/card/): A bordered surface with an optional title and actions.