---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.3
alternate:
  - https://divkit.tech/docs/en/concepts/visual.md
  - https://divkit.tech/docs/ru/concepts/visual.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt

# Visual element design

## Element visibility {#visibility}

Elements can have different visibility states that affect their display and behavior:

- `visible` — element is visible and takes up space in the layout;
- `invisible` — element is invisible but continues to take up space in the layout;
- `gone` — element is completely hidden and does not take up space in the layout.

### Visibility inheritance

When nesting elements in containers, a visibility inheritance system applies:
- Elements inside a container inherit the visibility of the parent container
- The actual visibility of an element is determined as the minimum visibility between its own visibility and the visibility of the parent container
- Visibility priority: `gone` > `invisible` > `visible`

This means that if a container has `invisible` or `gone` visibility, all its child elements will also be invisible, regardless of their own visibility settings.

## Transparency {#alpha}

You can set the transparency of an element by specifying the value of the `alpha` parameter from 0 to 1:

- `0`: Completely transparent.
- `0.5`: Translucent.
- `1`: Opaque.

![](../_images/create-card/alpha.png =300x)

{% cut "View an interactive example" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/visual_1.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}



## Background {#background}

All visual elements can have a background set in [background](https://divkit.tech/docs/en/concepts/divs/2/div-background.md). Background types:

- [linear-gradient](https://divkit.tech/docs/en/concepts/divs/2/div-linear-gradient.md): Linear gradient.
- [radial-gradient](https://divkit.tech/docs/en/concepts/divs/2/div-radial-gradient.md): Radial gradient.
- [solid](https://divkit.tech/docs/en/concepts/divs/2/div-solid-background.md): Solid color.
- [image](https://divkit.tech/docs/en/concepts/divs/2/div-image-background.md): Image.
- [nine-patch-image](https://divkit.tech/docs/en/concepts/divs/2/div-nine-patch-background.md): [Nine patch](https://developer.android.com/studio/write/draw9patch) image.

You can add several different backgrounds superimposed on each other to the array. In this case, the top-level background must be partially translucent, otherwise the lower layers won't be visible.

![](../_images/create-card/div-background.png =300x)

{% cut "View an interactive example" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/visual_2.json" width="700" height="700" frameborder="1"></iframe>


{% endcut %}



## Border {#button}

You can use the `border` parameter to set the border, the color and width, rounded corners, and a shadow:

1. Add an element, for example, [text](https://divkit.tech/docs/en/concepts/divs/2/div-text.md).
1. Add a [border](https://divkit.tech/docs/en/concepts/divs/2/div-border.md) and round the corners using the `corner_radius` parameter.
1. Add [fill](https://divkit.tech/docs/en/concepts/divs/2/div-background.md).
1. Add an [action](https://divkit.tech/docs/en/concepts/interaction.md) to perform when tapped to the resulting button.


{% cut "View an interactive example" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/visual_3.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->