# Style Properties (/common-widget-features/styles/style-properties) Sets width of Widget. Pixel, percentage and `LV_SIZE_CONTENT` values can be used. Percentage values are relative to the width of the parent's content area. Sets a minimal width. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area. Sets a maximal width. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area. Sets height of Widget. Pixel, percentage and `LV_SIZE_CONTENT` can be used. Percentage values are relative to the height of the parent's content area. Sets a minimal height. Pixel and percentage values can be used. Percentage values are relative to the height of the parent's content area. Sets a maximal height. Pixel and percentage values can be used. Percentage values are relative to the height of the parent's content area. Its meaning depends on the type of Widget. For example in case of lv\_scale it means the length of the ticks. Set the alignment which tells from which point of the parent the X and Y coordinates should be interpreted. Possible values are: `LV_ALIGN_DEFAULT`, `LV_ALIGN_TOP_LEFT/MID/RIGHT`, `LV_ALIGN_BOTTOM_LEFT/MID/RIGHT`, `LV_ALIGN_LEFT/RIGHT_MID`, `LV_ALIGN_CENTER`. `LV_ALIGN_DEFAULT` means `LV_ALIGN_TOP_LEFT` with LTR base direction and `LV_ALIGN_TOP_RIGHT` with RTL base direction. Make Widget wider on both sides with this value. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to Widget's width. Make Widget higher on both sides with this value. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to Widget's height. Move Widget with this value in X direction. Applied after layouts, aligns and other positioning. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to Widget's width. Move Widget with this value in Y direction. Applied after layouts, aligns and other positioning. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to Widget's height. Move object around the centre of the parent object (e.g. around the circumference of a scale). Zoom Widget horizontally. The value 256 (or `LV_SCALE_NONE`) means normal size, 128 half size, 512 double size, and so on. Zoom Widget vertically. The value 256 (or `LV_SCALE_NONE`) means normal size, 128 half size, 512 double size, and so on. Rotate Widget. The value is interpreted in 0.1 degree units. E.g. 450 means 45 deg. Set pivot point's X coordinate for transformations. Relative to Widget's top left corner. Set pivot point's Y coordinate for transformations. Relative to Widget's top left corner. Skew Widget horizontally. The value is interpreted in 0.1 degree units. E.g. 450 means 45 deg. Skew Widget vertically. The value is interpreted in 0.1 degree units. E.g. 450 means 45 deg. Sets the padding on the top. It makes the content area smaller in this direction. Sets the padding on the bottom. It makes the content area smaller in this direction. Sets the padding on the left. It makes the content area smaller in this direction. Sets the padding on the right. It makes the content area smaller in this direction. Sets the padding between the rows. Used by the layouts. Sets the padding between the columns. Used by the layouts. Pad text labels away from the scale ticks/remainder of the `LV_PART_`. Sets margin on the top. Widget will keep this space from its siblings in layouts. Sets margin on the bottom. Widget will keep this space from its siblings in layouts. Sets margin on the left. Widget will keep this space from its siblings in layouts. Sets margin on the right. Widget will keep this space from its siblings in layouts. Set background color of Widget. Set opacity of the background. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Set gradient color of the background. Used only if `grad_dir` is not `LV_GRAD_DIR_NONE`. Set direction of the gradient of the background. Possible values are `LV_GRAD_DIR_NONE/HOR/VER`. Set point from which background color should start for gradients. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on. Set point from which background's gradient color should start. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on. Set opacity of the first gradient color. Set opacity of the second gradient color. Set gradient definition. The pointed instance must exist while Widget is alive. NULL to disable. It wraps `BG_GRAD_COLOR`, `BG_GRAD_DIR`, `BG_MAIN_STOP` and `BG_GRAD_STOP` into one descriptor and allows creating gradients with more colors as well. If it's set other gradient related properties will be ignored. Set a background image. Can be a pointer to `lv_image_dsc_t`, a path to a file or an `LV_SYMBOL_...`. Set opacity of the background image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Set a color to mix to the background image. Set intensity of background image recoloring. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means no mixing, 255, `LV_OPA_100` or `LV_OPA_COVER` means full recoloring, other values or LV\_OPA\_10, LV\_OPA\_20, etc are interpreted proportionally. If enabled the background image will be tiled. Possible values are `true` or `false`. Set color of the border. Set opacity of the border. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Set width of the border. Only pixel values can be used. Set only which side(s) the border should be drawn. Possible values are `LV_BORDER_SIDE_NONE/TOP/BOTTOM/LEFT/RIGHT/INTERNAL`. OR-ed values can be used as well, e.g. `LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT`. Sets whether the border should be drawn before or after the children are drawn. `true`: after children, `false`: before children. Set width of outline in pixels. Set color of outline. Set opacity of outline. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Set padding of outline, i.e. the gap between Widget and the outline. Set width of the shadow in pixels. The value should be >= 0. Set an offset on the shadow in pixels in X direction. Set an offset on the shadow in pixels in Y direction. Make shadow calculation to use a larger or smaller rectangle as base. The value can be in pixels to make the area larger/smaller. Set color of shadow. Set opacity of shadow. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Set opacity of an image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Set color to mix with the image. Set intensity of color mixing. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Set image colorkey definition. The lv\_image\_colorkey\_t contains two color values: `high_color` and `low_color`. the color of pixels ranging from `low_color` to `high_color` will be transparent. Set width of lines in pixels. Set width of dashes in pixels. Note that dash works only on horizontal and vertical lines. Set gap between dashes in pixels. Note that dash works only on horizontal and vertical lines. Make end points of the lines rounded. `true`: rounded, `false`: perpendicular line ending. Set color of lines. Set opacity of lines. Set width (thickness) of arcs in pixels. Make end points of arcs rounded. `true`: rounded, `false`: perpendicular line ending. Set color of arc. Set opacity of arcs. Set an image from which arc will be masked out. It's useful to display complex effects on the arcs. Can be a pointer to `lv_image_dsc_t` or a path to a file. Sets color of text. Set opacity of text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Set font of text (a pointer `lv_font_t *`). Set letter space in pixels. Set line space in pixels. Set decoration for the text. Possible values are `LV_TEXT_DECOR_NONE/UNDERLINE/STRIKETHROUGH`. OR-ed values can be used as well. Set how to align the lines of the text. Note that it doesn't align the Widget itself, only the lines inside the Widget. Possible values are `LV_TEXT_ALIGN_LEFT/CENTER/RIGHT/AUTO`. `LV_TEXT_ALIGN_AUTO` detect the text base direction and uses left or right alignment accordingly. Sets the color of letter outline stroke. Set the letter outline stroke width in pixels. Set the opacity of the letter outline stroke. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Set the text leading trim mode. Removes empty space above and/or below text based on font metrics (cap-height, x-height, baseline). Similar to CSS `text-box-trim`. Possible values are `LV_TEXT_LEADING_TRIM_NONE/CAPITAL_BASELINE/LOWER_BASELINE/CAPITAL/LOWER`. Sets the intensity of blurring. Applied on each lv\_part separately before the children are rendered. If `true` the background of the widget will be blurred. The part should have \< 100% opacity to make it visible. If `false` the given part will be blurred when it's rendered but before drawing the children. Setting to `LV_BLUR_QUALITY_SPEED` the blurring algorithm will prefer speed over quality. `LV_BLUR_QUALITY_PRECISION` will force using higher quality but slower blur. With `LV_BLUR_QUALITY_AUTO` the quality will be selected automatically. Sets the intensity of blurring. Applied on each lv\_part separately before the children are rendered. Set an offset on the shadow in pixels in X direction. Set an offset on the shadow in pixels in Y direction. Set the color of the shadow. Set the opacity of the shadow. Setting to `LV_BLUR_QUALITY_SPEED` the blurring algorithm will prefer speed over quality. `LV_BLUR_QUALITY_PRECISION` will force using higher quality but slower blur. With `LV_BLUR_QUALITY_AUTO` the quality will be selected automatically. Set radius on every corner. The value is interpreted in pixels (>= 0) or `LV_RADIUS_CIRCLE` for max radius. Move start point of object (e.g. scale tick) radially. Enable clipping of content that overflows rounded corners of parent Widget. Can be `true` or `false`. Scale down all opacity values of the Widget by this factor. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. First draw Widget on the layer, then scale down layer opacity factor. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 255, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV\_OPA\_10, LV\_OPA\_20, etc means semi transparency. Mix a color with all colors of the Widget. The intensity of mixing of color filter. Set a color to mix to the obj. Sets the intensity of color mixing. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent. A value of 255, `LV_OPA_100` or `LV_OPA_COVER` means fully opaque. Intermediate values like LV\_OPA\_10, LV\_OPA\_20, etc result in semi-transparency. Animation template for Widget's animation. Should be a pointer to `lv_anim_t`. The animation parameters are widget specific, e.g. animation time could be the E.g. blink time of the cursor on the Text Area or scroll time of a roller. See Widgets' documentation to learn more. Animation duration in milliseconds. Its meaning is widget specific. E.g. blink time of the cursor on the Text Area or scroll time of a roller. See Widgets' documentation to learn more. An initialized `lv_style_transition_dsc_t` to describe a transition. Describes how to blend the colors to the background. Possible values are `LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE/MULTIPLY/DIFFERENCE`. Set layout of Widget. Children will be repositioned and resized according to policies set for the layout. For possible values see documentation of the layouts. Set base direction of Widget. Possible values are `LV_BIDI_DIR_LTR/RTL/AUTO`. If set, a layer will be created for the widget and the layer will be masked with this A8 bitmap mask. Adjust sensitivity for rotary encoders in 1/256 unit. It means, 128: slow down the rotary to half, 512: speeds up to double, 256: no change. Defines in which direction the flex layout should arrange the children. Defines how to align the children in the direction of flex flow. Defines how to align the children perpendicular to the direction of flex flow. Defines how to align the tracks of the flow. Defines how much space to take proportionally from the free space of the Widget's track. An array to describe the columns of the grid. Should be LV\_GRID\_TEMPLATE\_LAST terminated. Defines how to distribute the columns. An array to describe the rows of the grid. Should be LV\_GRID\_TEMPLATE\_LAST terminated. Defines how to distribute the rows. Set column in which Widget should be placed. Set how to align Widget horizontally. Set how many columns Widget should span. Needs to be >= 1. Set row in which Widget should be placed. Set how to align Widget vertically. Set how many rows Widget should span. Needs to be >= 1.