Visual element design

Transparency

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.

View an interactive example

Background

All visual elements can have a background set in background. Background types:

• linear-gradient: Linear gradient.
• radial-gradient: Radial gradient.
• solid: Solid color.
• image: Image.
• nine-patch-image: Nine patch 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.

View an interactive example

Border

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.
2. Add a border and round the corners using the corner_radius parameter.
3. Add fill.
4. Add an action to perform when tapped to the resulting button.

View an interactive example

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru

DivKit Repository