feat(dropshadow): add drop shadow support (#9331)

Co-authored-by: André Costa <andre_miguel_costa@hotmail.com>

docs/src/common-widget-features/styles/style-properties.rst

@@ -1277,6 +1277,142 @@ Set the opacity of the letter outline stroke. Value 0, `LV_OPA_0` or `LV_OPA_TRA
   <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
   </ul>
 
+Blur
+----
+
+Blur the widget or its background
+
+blur_radius
+~~~~~~~~~~~
+
+Sets the intensity of blurring. Applied on each lv_part separately before the children are rendered.
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0`</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+  </ul>
+
+blur_backdrop
+~~~~~~~~~~~~~
+
+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.
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `false`</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+  </ul>
+
+blur_quality
+~~~~~~~~~~~~
+
+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.
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_BLUR_QUALITY_AUTO`</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+  </ul>
+
+Drop shadow
+-----------
+
+Take an A8 snapshot of the given part and blur it.
+
+drop_shadow_radius
+~~~~~~~~~~~~~~~~~~
+
+Sets the intensity of blurring. Applied on each lv_part separately before the children are rendered.
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0`</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
+  </ul>
+
+drop_shadow_offset_x
+~~~~~~~~~~~~~~~~~~~~
+
+Set an offset on the shadow in pixels in X direction.
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0`</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
+  </ul>
+
+drop_shadow_offset_y
+~~~~~~~~~~~~~~~~~~~~
+
+Set an offset on the shadow in pixels in Y direction.
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0`</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
+  </ul>
+
+drop_shadow_color
+~~~~~~~~~~~~~~~~~
+
+Set the color of the shadow.
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0`</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+  </ul>
+
+drop_shadow_opa
+~~~~~~~~~~~~~~~
+
+Set the opacity of the shadow.
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0`</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+  </ul>
+
+drop_shadow_quality
+~~~~~~~~~~~~~~~~~~~
+
+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.
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_BLUR_QUALITY_AUTO`</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+  </ul>
+
 Miscellaneous
 -------------
 
@@ -1408,48 +1544,6 @@ Sets the intensity of color mixing. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means
   <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
   </ul>
 
-blur_radius
-~~~~~~~~~~~
-
-Sets the intensity of blurring. Applied on each lv_part separately before the children are rendered.
-
-.. raw:: html
-
-  <ul>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0`</li>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
-  </ul>
-
-blur_backdrop
-~~~~~~~~~~~~~
-
-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.
-
-.. raw:: html
-
-  <ul>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `false`</li>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
-  </ul>
-
-blur_quality
-~~~~~~~~~~~~
-
-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.
-
-.. raw:: html
-
-  <ul>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_BLUR_QUALITY_AUTO`</li>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
-  </ul>
-
 anim
 ~~~~
 

docs/src/main-modules/draw/draw_descriptors.rst

@@ -190,15 +190,15 @@ The following show some example gradients.
 .. lv_example:: styles/lv_example_style_2
   :language: c
 
-.. lv_example:: styles/lv_example_style_16
-  :language: c
-
 .. lv_example:: styles/lv_example_style_17
   :language: c
 
 .. lv_example:: styles/lv_example_style_18
   :language: c
 
+.. lv_example:: styles/lv_example_style_19
+  :language: c
+
 For each gradient type, multiple color and opacity values can be assigned.  These are
 called "stops".  The maximum number of stops is limited to
 :c:macro:`LV_GRADIENT_MAX_STOPS`.
@@ -384,9 +384,9 @@ differences compared to borders in :cpp:type:`lv_draw_rect_dsc_t` are:
 Box Shadow Draw Descriptor
 **************************
 
-The :cpp:type:`lv_draw_box_shadow_dsc_t` box shadow descriptor describes a **rounded
+The :cpp:type:`lv_draw_box_shadow_dsc_t` box shadow descriptor describes a
-rectangle-shaped shadow**.  It cannot generate shadows for arbitrary shapes, text, or
+**rounded rectangle-shaped shadow**.  It cannot generate shadows for arbitrary
-images.  It includes the following fields:
+shapes, text, or images.  It includes the following fields:
 
 :radius:    Radius, :cpp:expr:`LV_RADIUS_CIRCLE`.
 :color:     Shadow color.
@@ -413,7 +413,6 @@ The following functions are used for box shadow drawing:
   :language: c
 
 
-
 Image Draw Descriptor
 *********************
 
@@ -636,6 +635,37 @@ Functions for blur drawing:
   :language: c
 
 
+
+Drop Shadow Draw Descriptor
+***************************
+
+Unlike Box shadow, the Drop shadow can be applied for any widgets and parts.
+For example a Label, the Arc's Indicator, an ARGB image, Lines of a chart, etc.
+
+The Drop shadow doesn't have its own draw descriptor but it's part of the base
+descriptor. This way before rendering anything LVGL can create a new layer with
+A8 color format, render the shape there, blur the layer, and finally blend the
+blurred layer with an offset.
+
+Creating a layer requires `width x height` bytes of memory. This memory is used only
+temporarily, so in most of the cases if multiple widgets have drop shadow, only one
+layer is active  and using memory at a time.
+
+The properties are stored in ``draw_dsc.base.drop_shadow_*``. It includes the
+following fields:
+
+:drop_shadow_opa:       Opacity (0--255 range). Values like ``LV_OPA_TRANSP``,
+                        ``LV_OPA_10``, etc., can also be used. If 0, the drop shadow
+                        won't be rendered
+:drop_shadow_color:     Drop shadow color.
+:drop_shadow_radius:    The blur radius of the drop shadow.
+:drop_shadow_ofs_x:     Horizontal offset.
+:drop_shadow_ofs_y:     Vertical offset.
+
+.. lv_example:: styles/lv_example_style_10
+  :language: c
+
+
 Vector Draw Descriptor
 **********************
 

examples/styles/index.rst

@@ -53,69 +53,74 @@ Line styles
 .. lv_example:: styles/lv_example_style_9
   :language: c
 
+Drop shadow styles
+------------------
+
+.. lv_example:: styles/lv_example_style_10
+  :language: c
+
 Transition
 ----------
 
-.. lv_example:: styles/lv_example_style_10
+.. lv_example:: styles/lv_example_style_11
   :language: c
 
 Using multiple styles
 ---------------------
 
-.. lv_example:: styles/lv_example_style_11
+.. lv_example:: styles/lv_example_style_12
   :language: c
 
 Local styles
 ------------
 
-.. lv_example:: styles/lv_example_style_12
+.. lv_example:: styles/lv_example_style_13
   :language: c
 
 Add styles to parts and states
 ------------------------------
 
-.. lv_example:: styles/lv_example_style_13
+.. lv_example:: styles/lv_example_style_14
   :language: c
 
 Extending the current theme
 ---------------------------
 
-.. lv_example:: styles/lv_example_style_14
+.. lv_example:: styles/lv_example_style_15
   :language: c
 
 Opacity and Transformations
 ---------------------------
 
-.. lv_example:: styles/lv_example_style_15
+.. lv_example:: styles/lv_example_style_16
   :language: c
 
 Metallic knob with conic gradient
 ---------------------------------
 
-.. lv_example:: styles/lv_example_style_16
+.. lv_example:: styles/lv_example_style_17
   :language: c
 
 Radial gradient as background
 -----------------------------
 
-.. lv_example:: styles/lv_example_style_17
+.. lv_example:: styles/lv_example_style_18
   :language: c
 
 Gradients for button background
 -------------------------------
 
-.. lv_example:: styles/lv_example_style_18
+.. lv_example:: styles/lv_example_style_19
   :language: c
 
 Test between recolor style or full background modal
 ---------------------------------------------------
 
-.. lv_example:: styles/lv_example_style_19
+.. lv_example:: styles/lv_example_style_20
   :language: c
 
-
 Transform style
 ---------------
 
-.. lv_example:: styles/lv_example_style_20
+.. lv_example:: styles/lv_example_style_21
   :language: c

examples/styles/lv_example_style.h

@@ -47,6 +47,7 @@ void lv_example_style_17(void);
 void lv_example_style_18(void);
 void lv_example_style_19(void);
 void lv_example_style_20(void);
+void lv_example_style_21(void);
 
 /**********************
  *      MACROS

examples/styles/lv_example_style_10.c

@@ -1,39 +1,23 @@
 #include "../lv_examples.h"
-#if LV_BUILD_EXAMPLES && LV_USE_IMAGE
+#if LV_BUILD_EXAMPLES && LV_USE_LINE
 
 /**
- * Creating a transition
+ * Using the drop shadow style properties
  */
 void lv_example_style_10(void)
 {
-    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, 0};
+    static lv_style_t style;
+    lv_style_init(&style);
 
-    /* A default transition
+    lv_style_set_drop_shadow_color(&style, lv_palette_main(LV_PALETTE_RED));
-     * Make it fast (100ms) and start with some delay (200 ms)*/
+    lv_style_set_drop_shadow_radius(&style, 16);
-    static lv_style_transition_dsc_t trans_def;
+    lv_style_set_drop_shadow_opa(&style, 255);
-    lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200, NULL);
+    lv_style_set_drop_shadow_offset_x(&style, 5);
-
+    lv_style_set_drop_shadow_offset_y(&style, 10);
-    /* A special transition when going to pressed state
-     * Make it slow (500 ms) but start  without delay*/
-    static lv_style_transition_dsc_t trans_pr;
-    lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_linear, 500, 0, NULL);
-
-    static lv_style_t style_def;
-    lv_style_init(&style_def);
-    lv_style_set_transition(&style_def, &trans_def);
-
-    static lv_style_t style_pr;
-    lv_style_init(&style_pr);
-    lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
-    lv_style_set_border_width(&style_pr, 6);
-    lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 3));
-    lv_style_set_transition(&style_pr, &trans_pr);
-
-    /*Create an object with the new style_pr*/
-    lv_obj_t * obj = lv_obj_create(lv_screen_active());
-    lv_obj_add_style(obj, &style_def, 0);
-    lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);
 
+    /*Create an object with the new style*/
+    lv_obj_t * obj = lv_arc_create(lv_screen_active());
+    lv_obj_add_style(obj, &style, LV_PART_INDICATOR);
     lv_obj_center(obj);
 }
 

examples/styles/lv_example_style_11.c

@@ -2,49 +2,39 @@
 #if LV_BUILD_EXAMPLES && LV_USE_IMAGE
 
 /**
- * Using multiple styles
+ * Creating a transition
  */
 void lv_example_style_11(void)
 {
-    /*A base style*/
+    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, 0};
-    static lv_style_t style_base;
-    lv_style_init(&style_base);
-    lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
-    lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE, 3));
-    lv_style_set_border_width(&style_base, 2);
-    lv_style_set_radius(&style_base, 10);
-    lv_style_set_shadow_width(&style_base, 10);
-    lv_style_set_shadow_offset_y(&style_base, 5);
-    lv_style_set_shadow_opa(&style_base, LV_OPA_50);
-    lv_style_set_text_color(&style_base, lv_color_white());
-    lv_style_set_width(&style_base, 100);
-    lv_style_set_height(&style_base, LV_SIZE_CONTENT);
 
-    /*Set only the properties that should be different*/
+    /* A default transition
-    static lv_style_t style_warning;
+     * Make it fast (100ms) and start with some delay (200 ms)*/
-    lv_style_init(&style_warning);
+    static lv_style_transition_dsc_t trans_def;
-    lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
+    lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200, NULL);
-    lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 3));
-    lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));
 
-    /*Create an object with the base style only*/
+    /* A special transition when going to pressed state
-    lv_obj_t * obj_base = lv_obj_create(lv_screen_active());
+     * Make it slow (500 ms) but start  without delay*/
-    lv_obj_add_style(obj_base, &style_base, 0);
+    static lv_style_transition_dsc_t trans_pr;
-    lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);
+    lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_linear, 500, 0, NULL);
 
-    lv_obj_t * label = lv_label_create(obj_base);
+    static lv_style_t style_def;
-    lv_label_set_text(label, "Base");
+    lv_style_init(&style_def);
-    lv_obj_center(label);
+    lv_style_set_transition(&style_def, &trans_def);
 
-    /*Create another object with the base style and earnings style too*/
+    static lv_style_t style_pr;
-    lv_obj_t * obj_warning = lv_obj_create(lv_screen_active());
+    lv_style_init(&style_pr);
-    lv_obj_add_style(obj_warning, &style_base, 0);
+    lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
-    lv_obj_add_style(obj_warning, &style_warning, 0);
+    lv_style_set_border_width(&style_pr, 6);
-    lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);
+    lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 3));
+    lv_style_set_transition(&style_pr, &trans_pr);
 
-    label = lv_label_create(obj_warning);
+    /*Create an object with the new style_pr*/
-    lv_label_set_text(label, "Warning");
+    lv_obj_t * obj = lv_obj_create(lv_screen_active());
-    lv_obj_center(label);
+    lv_obj_add_style(obj, &style_def, 0);
+    lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);
+
+    lv_obj_center(obj);
 }
 
 #endif

examples/styles/lv_example_style_12.c

@@ -2,23 +2,49 @@
 #if LV_BUILD_EXAMPLES && LV_USE_IMAGE
 
 /**
- * Local styles
+ * Using multiple styles
  */
 void lv_example_style_12(void)
 {
-    static lv_style_t style;
+    /*A base style*/
-    lv_style_init(&style);
+    static lv_style_t style_base;
-    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREEN));
+    lv_style_init(&style_base);
-    lv_style_set_border_color(&style, lv_palette_lighten(LV_PALETTE_GREEN, 3));
+    lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
-    lv_style_set_border_width(&style, 3);
+    lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE, 3));
+    lv_style_set_border_width(&style_base, 2);
+    lv_style_set_radius(&style_base, 10);
+    lv_style_set_shadow_width(&style_base, 10);
+    lv_style_set_shadow_offset_y(&style_base, 5);
+    lv_style_set_shadow_opa(&style_base, LV_OPA_50);
+    lv_style_set_text_color(&style_base, lv_color_white());
+    lv_style_set_width(&style_base, 100);
+    lv_style_set_height(&style_base, LV_SIZE_CONTENT);
 
-    lv_obj_t * obj = lv_obj_create(lv_screen_active());
+    /*Set only the properties that should be different*/
-    lv_obj_add_style(obj, &style, 0);
+    static lv_style_t style_warning;
+    lv_style_init(&style_warning);
+    lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
+    lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 3));
+    lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));
 
-    /*Overwrite the background color locally*/
+    /*Create an object with the base style only*/
-    lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_ORANGE), LV_PART_MAIN);
+    lv_obj_t * obj_base = lv_obj_create(lv_screen_active());
+    lv_obj_add_style(obj_base, &style_base, 0);
+    lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);
 
-    lv_obj_center(obj);
+    lv_obj_t * label = lv_label_create(obj_base);
+    lv_label_set_text(label, "Base");
+    lv_obj_center(label);
+
+    /*Create another object with the base style and warning style too*/
+    lv_obj_t * obj_warning = lv_obj_create(lv_screen_active());
+    lv_obj_add_style(obj_warning, &style_base, 0);
+    lv_obj_add_style(obj_warning, &style_warning, 0);
+    lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);
+
+    label = lv_label_create(obj_warning);
+    lv_label_set_text(label, "Warning");
+    lv_obj_center(label);
 }
 
 #endif

examples/styles/lv_example_style_13.c

@@ -2,27 +2,22 @@
 #if LV_BUILD_EXAMPLES && LV_USE_IMAGE
 
 /**
- * Add styles to parts and states
+ * Local styles
  */
 void lv_example_style_13(void)
 {
-    static lv_style_t style_indic;
+    static lv_style_t style;
-    lv_style_init(&style_indic);
+    lv_style_init(&style);
-    lv_style_set_bg_color(&style_indic, lv_palette_lighten(LV_PALETTE_RED, 3));
+    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREEN));
-    lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_RED));
+    lv_style_set_border_color(&style, lv_palette_lighten(LV_PALETTE_GREEN, 3));
-    lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_HOR);
+    lv_style_set_border_width(&style, 3);
 
-    static lv_style_t style_indic_pr;
+    lv_obj_t * obj = lv_obj_create(lv_screen_active());
-    lv_style_init(&style_indic_pr);
+    lv_obj_add_style(obj, &style, 0);
-    lv_style_set_shadow_color(&style_indic_pr, lv_palette_main(LV_PALETTE_RED));
+
-    lv_style_set_shadow_width(&style_indic_pr, 10);
+    /*Overwrite the background color locally*/
-    lv_style_set_shadow_spread(&style_indic_pr, 3);
+    lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_ORANGE), LV_PART_MAIN);
 
-    /*Create an object with the new style_pr*/
-    lv_obj_t * obj = lv_slider_create(lv_screen_active());
-    lv_obj_add_style(obj, &style_indic, LV_PART_INDICATOR);
-    lv_obj_add_style(obj, &style_indic_pr, LV_PART_INDICATOR | LV_STATE_PRESSED);
-    lv_slider_set_value(obj, 70, LV_ANIM_OFF);
     lv_obj_center(obj);
 }
 

examples/styles/lv_example_style_14.c

@@ -1,76 +1,29 @@
 #include "../lv_examples.h"
 #if LV_BUILD_EXAMPLES && LV_USE_IMAGE
-#include "../../lvgl_private.h"
-
-static lv_style_t style_btn;
-
-
-/*Will be called when the styles of the base theme are already added
-  to add new styles*/
-static void new_theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
-{
-    LV_UNUSED(th);
-
-    if(lv_obj_check_type(obj, &lv_button_class)) {
-        lv_obj_add_style(obj, &style_btn, 0);
-    }
-}
-
-static void on_display_delete(lv_event_t * e)
-{
-    lv_display_t * display = (lv_display_t *) lv_event_get_target(e);
-    lv_theme_t * display_theme = lv_display_get_theme(display);
-    lv_theme_delete(display_theme);
-}
-
-static void new_theme_init_and_set(void)
-{
-    lv_display_t * display = lv_display_get_default();
-
-    /*Initialize the styles*/
-    lv_style_init(&style_btn);
-    lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_GREEN));
-    lv_style_set_border_color(&style_btn, lv_palette_darken(LV_PALETTE_GREEN, 3));
-    lv_style_set_border_width(&style_btn, 3);
-
-    /* Initialize the new theme with the current theme as its parent
-     * The user is responsible for freeing the theme when it's no longer needed */
-    lv_theme_t * th_act = lv_display_get_theme(NULL);
-    lv_theme_t * th_new = lv_theme_create();
-    lv_theme_copy(th_new, th_act);
-    lv_theme_set_parent(th_new, th_act);
-
-    /*Set the style apply callback for the new theme*/
-    lv_theme_set_apply_cb(th_new, new_theme_apply_cb);
-
-    /*Assign the new theme to the current display*/
-    lv_display_set_theme(display, th_new);
-
-    /* Assign a delete event callback so that we can delete the theme when the display is deleted*/
-    lv_display_add_event_cb(display, on_display_delete, LV_EVENT_DELETE, NULL);
-}
 
 /**
- * Extending the current theme
+ * Add styles to parts and states
  */
 void lv_example_style_14(void)
 {
-    lv_obj_t * btn;
+    static lv_style_t style_indic;
-    lv_obj_t * label;
+    lv_style_init(&style_indic);
+    lv_style_set_bg_color(&style_indic, lv_palette_lighten(LV_PALETTE_RED, 3));
+    lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_RED));
+    lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_HOR);
 
-    btn = lv_button_create(lv_screen_active());
+    static lv_style_t style_indic_pr;
-    lv_obj_align(btn, LV_ALIGN_TOP_MID, 0, 20);
+    lv_style_init(&style_indic_pr);
+    lv_style_set_shadow_color(&style_indic_pr, lv_palette_main(LV_PALETTE_RED));
+    lv_style_set_shadow_width(&style_indic_pr, 10);
+    lv_style_set_shadow_spread(&style_indic_pr, 3);
 
-    label = lv_label_create(btn);
+    /*Create an object with the new style_pr*/
-    lv_label_set_text(label, "Original theme");
+    lv_obj_t * obj = lv_slider_create(lv_screen_active());
-
+    lv_obj_add_style(obj, &style_indic, LV_PART_INDICATOR);
-    new_theme_init_and_set();
+    lv_obj_add_style(obj, &style_indic_pr, LV_PART_INDICATOR | LV_STATE_PRESSED);
-
+    lv_slider_set_value(obj, 70, LV_ANIM_OFF);
-    btn = lv_button_create(lv_screen_active());
+    lv_obj_center(obj);
-    lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, -20);
-
-    label = lv_label_create(btn);
-    lv_label_set_text(label, "New theme");
 }
 
 #endif

examples/styles/lv_example_style_15.c

@@ -1,48 +1,76 @@
 #include "../lv_examples.h"
-#if LV_BUILD_EXAMPLES && LV_USE_BUTTON && LV_USE_LABEL
+#if LV_BUILD_EXAMPLES && LV_USE_IMAGE
+#include "../../lvgl_private.h"
+
+static lv_style_t style_btn;
+
+
+/*Will be called when the styles of the base theme are already added
+  to add new styles*/
+static void new_theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
+{
+    LV_UNUSED(th);
+
+    if(lv_obj_check_type(obj, &lv_button_class)) {
+        lv_obj_add_style(obj, &style_btn, 0);
+    }
+}
+
+static void on_display_delete(lv_event_t * e)
+{
+    lv_display_t * display = (lv_display_t *) lv_event_get_target(e);
+    lv_theme_t * display_theme = lv_display_get_theme(display);
+    lv_theme_delete(display_theme);
+}
+
+static void new_theme_init_and_set(void)
+{
+    lv_display_t * display = lv_display_get_default();
+
+    /*Initialize the styles*/
+    lv_style_init(&style_btn);
+    lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_GREEN));
+    lv_style_set_border_color(&style_btn, lv_palette_darken(LV_PALETTE_GREEN, 3));
+    lv_style_set_border_width(&style_btn, 3);
+
+    /* Initialize the new theme with the current theme as its parent
+     * The user is responsible for freeing the theme when it's no longer needed */
+    lv_theme_t * th_act = lv_display_get_theme(NULL);
+    lv_theme_t * th_new = lv_theme_create();
+    lv_theme_copy(th_new, th_act);
+    lv_theme_set_parent(th_new, th_act);
+
+    /*Set the style apply callback for the new theme*/
+    lv_theme_set_apply_cb(th_new, new_theme_apply_cb);
+
+    /*Assign the new theme to the current display*/
+    lv_display_set_theme(display, th_new);
+
+    /* Assign a delete event callback so that we can delete the theme when the display is deleted*/
+    lv_display_add_event_cb(display, on_display_delete, LV_EVENT_DELETE, NULL);
+}
 
 /**
- * Opacity and Transformations
+ * Extending the current theme
  */
 void lv_example_style_15(void)
 {
     lv_obj_t * btn;
     lv_obj_t * label;
 
-    /*Normal button*/
     btn = lv_button_create(lv_screen_active());
-    lv_obj_set_size(btn, 100, 40);
+    lv_obj_align(btn, LV_ALIGN_TOP_MID, 0, 20);
-    lv_obj_align(btn, LV_ALIGN_CENTER, 0, -70);
 
     label = lv_label_create(btn);
-    lv_label_set_text(label, "Normal");
+    lv_label_set_text(label, "Original theme");
-    lv_obj_center(label);
+
+    new_theme_init_and_set();
 
-    /*Set opacity
-     *The button and the label is rendered to a layer first and that layer is blended*/
     btn = lv_button_create(lv_screen_active());
-    lv_obj_set_size(btn, 100, 40);
+    lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, -20);
-    lv_obj_set_style_opa(btn, LV_OPA_50, 0);
-    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);
 
     label = lv_label_create(btn);
-    lv_label_set_text(label, "Opa:50%");
+    lv_label_set_text(label, "New theme");
-    lv_obj_center(label);
-
-    /*Set transformations
-     *The button and the label is rendered to a layer first and that layer is transformed*/
-    btn = lv_button_create(lv_screen_active());
-    lv_obj_set_size(btn, 100, 40);
-    lv_obj_set_style_transform_rotation(btn, 150, 0);        /*15 deg*/
-    lv_obj_set_style_transform_scale(btn, 256 + 64, 0);   /*1.25x*/
-    lv_obj_set_style_transform_pivot_x(btn, 50, 0);
-    lv_obj_set_style_transform_pivot_y(btn, 20, 0);
-    lv_obj_set_style_opa(btn, LV_OPA_50, 0);
-    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 70);
-
-    label = lv_label_create(btn);
-    lv_label_set_text(label, "Transf.");
-    lv_obj_center(label);
 }
 
 #endif

examples/styles/lv_example_style_16.c

@@ -1,84 +1,48 @@
 #include "../lv_examples.h"
-#if LV_BUILD_EXAMPLES
+#if LV_BUILD_EXAMPLES && LV_USE_BUTTON && LV_USE_LABEL
-
-#if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
 
 /**
- * Simulate metallic knob using conical gradient
+ * Opacity and Transformations
- * For best effect set LV_GRADIENT_MAX_STOPS to 8 or at least 3
  */
 void lv_example_style_16(void)
 {
-#if LV_GRADIENT_MAX_STOPS >= 8
+    lv_obj_t * btn;
-    static const lv_color_t grad_colors[8] = {
+    lv_obj_t * label;
-        LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
-        LV_COLOR_MAKE(0xff, 0xff, 0xff),
-        LV_COLOR_MAKE(0xfa, 0xfa, 0xfa),
-        LV_COLOR_MAKE(0x79, 0x79, 0x79),
-        LV_COLOR_MAKE(0x48, 0x48, 0x48),
-        LV_COLOR_MAKE(0x4b, 0x4b, 0x4b),
-        LV_COLOR_MAKE(0x70, 0x70, 0x70),
-        LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
-    };
-#elif LV_GRADIENT_MAX_STOPS >= 3
-    static const lv_color_t grad_colors[3] = {
-        LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
-        LV_COLOR_MAKE(0xff, 0xff, 0xff),
-        LV_COLOR_MAKE(0x79, 0x79, 0x79),
-    };
-#else
-    static const lv_color_t grad_colors[2] = {
-        LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
-        LV_COLOR_MAKE(0x79, 0x79, 0x79),
-    };
-#endif
 
-    /*Create a style with gradient background and shadow*/
+    /*Normal button*/
-    static lv_style_t style;
+    btn = lv_button_create(lv_screen_active());
-    lv_style_init(&style);
+    lv_obj_set_size(btn, 100, 40);
-    lv_style_set_radius(&style, 500);
+    lv_obj_align(btn, LV_ALIGN_CENTER, 0, -70);
-    lv_style_set_bg_opa(&style, LV_OPA_COVER);
-    lv_style_set_shadow_color(&style, lv_color_black());
-    lv_style_set_shadow_width(&style, 50);
-    lv_style_set_shadow_offset_x(&style, 20);
-    lv_style_set_shadow_offset_y(&style, 20);
-    lv_style_set_shadow_opa(&style, LV_OPA_50);
 
-    /*First define a color gradient. In this example we use a gray color map with random values.*/
+    label = lv_label_create(btn);
-    static lv_grad_dsc_t grad;
+    lv_label_set_text(label, "Normal");
+    lv_obj_center(label);
 
-    lv_grad_init_stops(&grad, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+    /*Set opacity
+     *The button and the label is rendered to a layer first and that layer is blended*/
+    btn = lv_button_create(lv_screen_active());
+    lv_obj_set_size(btn, 100, 40);
+    lv_obj_set_style_opa(btn, LV_OPA_50, 0);
+    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);
 
-    /*Make a conical gradient with the center in the middle of the object*/
+    label = lv_label_create(btn);
-#if LV_GRADIENT_MAX_STOPS >= 8
+    lv_label_set_text(label, "Opa:50%");
-    lv_grad_conical_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, 0, 120, LV_GRAD_EXTEND_REFLECT);
+    lv_obj_center(label);
-#elif LV_GRADIENT_MAX_STOPS >= 3
-    lv_grad_conical_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, 45, 125, LV_GRAD_EXTEND_REFLECT);
-#else
-    lv_grad_conical_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, 45, 110, LV_GRAD_EXTEND_REFLECT);
-#endif
 
-    /*Set gradient as background*/
+    /*Set transformations
-    lv_style_set_bg_grad(&style, &grad);
+     *The button and the label is rendered to a layer first and that layer is transformed*/
+    btn = lv_button_create(lv_screen_active());
+    lv_obj_set_size(btn, 100, 40);
+    lv_obj_set_style_transform_rotation(btn, 150, 0);        /*15 deg*/
+    lv_obj_set_style_transform_scale(btn, 256 + 64, 0);   /*1.25x*/
+    lv_obj_set_style_transform_pivot_x(btn, 50, 0);
+    lv_obj_set_style_transform_pivot_y(btn, 20, 0);
+    lv_obj_set_style_opa(btn, LV_OPA_50, 0);
+    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 70);
 
-    /*Create an object with the new style*/
+    label = lv_label_create(btn);
-    lv_obj_t * obj = lv_obj_create(lv_screen_active());
+    lv_label_set_text(label, "Transf.");
-    lv_obj_add_style(obj, &style, 0);
-    lv_obj_set_size(obj, 200, 200);
-    lv_obj_center(obj);
-}
-
-#else
-
-void lv_example_style_16(void)
-{
-    lv_obj_t * label = lv_label_create(lv_screen_active());
-    lv_obj_set_width(label, LV_PCT(80));
-    lv_label_set_text(label, "LV_USE_DRAW_SW_COMPLEX_GRADIENTS is not enabled");
-    lv_label_set_long_mode(label, LV_LABEL_LONG_MODE_SCROLL_CIRCULAR);
     lv_obj_center(label);
 }
 
-#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
+#endif
-
-#endif /*LV_BUILD_EXAMPLES*/

examples/styles/lv_example_style_17.c

@@ -4,28 +4,59 @@
 #if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
 
 /**
- * Using radial gradient as background
+ * Simulate metallic knob using conical gradient
+ * For best effect set LV_GRADIENT_MAX_STOPS to 8 or at least 3
  */
 void lv_example_style_17(void)
 {
-    static const lv_color_t grad_colors[2] = {
+#if LV_GRADIENT_MAX_STOPS >= 8
-        LV_COLOR_MAKE(0x9B, 0x18, 0x42),
+    static const lv_color_t grad_colors[8] = {
-        LV_COLOR_MAKE(0x00, 0x00, 0x00),
+        LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
+        LV_COLOR_MAKE(0xff, 0xff, 0xff),
+        LV_COLOR_MAKE(0xfa, 0xfa, 0xfa),
+        LV_COLOR_MAKE(0x79, 0x79, 0x79),
+        LV_COLOR_MAKE(0x48, 0x48, 0x48),
+        LV_COLOR_MAKE(0x4b, 0x4b, 0x4b),
+        LV_COLOR_MAKE(0x70, 0x70, 0x70),
+        LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
     };
+#elif LV_GRADIENT_MAX_STOPS >= 3
+    static const lv_color_t grad_colors[3] = {
+        LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
+        LV_COLOR_MAKE(0xff, 0xff, 0xff),
+        LV_COLOR_MAKE(0x79, 0x79, 0x79),
+    };
+#else
+    static const lv_color_t grad_colors[2] = {
+        LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
+        LV_COLOR_MAKE(0x79, 0x79, 0x79),
+    };
+#endif
 
-    int32_t width = lv_display_get_horizontal_resolution(NULL);
+    /*Create a style with gradient background and shadow*/
-    int32_t height = lv_display_get_vertical_resolution(NULL);
-
     static lv_style_t style;
     lv_style_init(&style);
+    lv_style_set_radius(&style, 500);
+    lv_style_set_bg_opa(&style, LV_OPA_COVER);
+    lv_style_set_shadow_color(&style, lv_color_black());
+    lv_style_set_shadow_width(&style, 50);
+    lv_style_set_shadow_offset_x(&style, 20);
+    lv_style_set_shadow_offset_y(&style, 20);
+    lv_style_set_shadow_opa(&style, LV_OPA_50);
 
-    /*First define a color gradient. In this example we use a purple to black color map.*/
+    /*First define a color gradient. In this example we use a gray color map with random values.*/
     static lv_grad_dsc_t grad;
 
     lv_grad_init_stops(&grad, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
 
-    /*Make a radial gradient with the center in the middle of the object, extending to the farthest corner*/
+    /*Make a conical gradient with the center in the middle of the object*/
-    lv_grad_radial_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, LV_GRAD_RIGHT, LV_GRAD_BOTTOM, LV_GRAD_EXTEND_PAD);
+#if LV_GRADIENT_MAX_STOPS >= 8
+    lv_grad_conical_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, 0, 120, LV_GRAD_EXTEND_REFLECT);
+#elif LV_GRADIENT_MAX_STOPS >= 3
+    lv_grad_conical_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, 45, 125, LV_GRAD_EXTEND_REFLECT);
+#else
+    lv_grad_conical_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, 45, 110, LV_GRAD_EXTEND_REFLECT);
+#endif
 
     /*Set gradient as background*/
     lv_style_set_bg_grad(&style, &grad);
@@ -33,7 +64,7 @@ void lv_example_style_17(void)
     /*Create an object with the new style*/
     lv_obj_t * obj = lv_obj_create(lv_screen_active());
     lv_obj_add_style(obj, &style, 0);
-    lv_obj_set_size(obj, width, height);
+    lv_obj_set_size(obj, 200, 200);
     lv_obj_center(obj);
 }
 

examples/styles/lv_example_style_18.c

@@ -4,83 +4,37 @@
 #if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
 
 /**
- * Using various gradients for button background
+ * Using radial gradient as background
  */
 void lv_example_style_18(void)
 {
     static const lv_color_t grad_colors[2] = {
-        LV_COLOR_MAKE(0x26, 0xa0, 0xda),
+        LV_COLOR_MAKE(0x9B, 0x18, 0x42),
-        LV_COLOR_MAKE(0x31, 0x47, 0x55),
+        LV_COLOR_MAKE(0x00, 0x00, 0x00),
     };
 
-    /*Create a linear gradient going from the top left corner to the bottom at an angle, with reflected color map*/
+    int32_t width = lv_display_get_horizontal_resolution(NULL);
-    static lv_style_t style_with_linear_gradient_bg;
+    int32_t height = lv_display_get_vertical_resolution(NULL);
-    static lv_grad_dsc_t linear_gradient_dsc;     /*NOTE: the gradient descriptor must be static or global variable!*/
 
-    lv_style_init(&style_with_linear_gradient_bg);
+    static lv_style_t style;
-    lv_grad_init_stops(&linear_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+    lv_style_init(&style);
-    lv_grad_linear_init(&linear_gradient_dsc, lv_pct(0), lv_pct(0), lv_pct(20), lv_pct(100), LV_GRAD_EXTEND_REFLECT);
-    lv_style_set_bg_grad(&style_with_linear_gradient_bg, &linear_gradient_dsc);
-    lv_style_set_bg_opa(&style_with_linear_gradient_bg, LV_OPA_COVER);
 
-    /*Create a radial gradient with the center in the top left 1/3rd of the object, extending to the bottom right corner, with reflected color map*/
+    /*First define a color gradient. In this example we use a purple to black color map.*/
-    static lv_style_t style_with_radial_gradient_bg;
+    static lv_grad_dsc_t grad;
-    static lv_grad_dsc_t radial_gradient_dsc;     /*NOTE: the gradient descriptor must be static or global variable!*/
 
-    lv_style_init(&style_with_radial_gradient_bg);
+    lv_grad_init_stops(&grad, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
-    lv_grad_init_stops(&radial_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
-    lv_grad_radial_init(&radial_gradient_dsc, lv_pct(30), lv_pct(30), lv_pct(100), lv_pct(100), LV_GRAD_EXTEND_REFLECT);
-    lv_style_set_bg_grad(&style_with_radial_gradient_bg, &radial_gradient_dsc);
-    lv_style_set_bg_opa(&style_with_radial_gradient_bg, LV_OPA_COVER);
 
-    /*Create buttons with different gradient styles*/
+    /*Make a radial gradient with the center in the middle of the object, extending to the farthest corner*/
+    lv_grad_radial_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, LV_GRAD_RIGHT, LV_GRAD_BOTTOM, LV_GRAD_EXTEND_PAD);
 
-    lv_obj_t * btn;
+    /*Set gradient as background*/
-    lv_obj_t * label;
+    lv_style_set_bg_grad(&style, &grad);
 
-    /*Simple horizontal gradient*/
+    /*Create an object with the new style*/
-    btn = lv_button_create(lv_screen_active());
+    lv_obj_t * obj = lv_obj_create(lv_screen_active());
-    lv_obj_set_style_bg_color(btn, grad_colors[0], 0);
+    lv_obj_add_style(obj, &style, 0);
-    lv_obj_set_style_bg_grad_color(btn, grad_colors[1], 0);
+    lv_obj_set_size(obj, width, height);
-    lv_obj_set_style_bg_grad_dir(btn, LV_GRAD_DIR_HOR, 0);
+    lv_obj_center(obj);
-    lv_obj_set_size(btn, 150, 50);
-    lv_obj_align(btn, LV_ALIGN_CENTER, 0, -100);
-
-    label = lv_label_create(btn);
-    lv_label_set_text(label, "Horizontal");
-    lv_obj_center(label);
-
-    /*Simple vertical gradient*/
-    btn = lv_button_create(lv_screen_active());
-    lv_obj_set_style_bg_color(btn, grad_colors[0], 0);
-    lv_obj_set_style_bg_grad_color(btn, grad_colors[1], 0);
-    lv_obj_set_style_bg_grad_dir(btn, LV_GRAD_DIR_VER, 0);
-    lv_obj_set_size(btn, 150, 50);
-    lv_obj_align(btn, LV_ALIGN_CENTER, 0, -40);
-
-    label = lv_label_create(btn);
-    lv_label_set_text(label, "Vertical");
-    lv_obj_center(label);
-
-    /*Complex linear gradient*/
-    btn = lv_button_create(lv_screen_active());
-    lv_obj_add_style(btn, &style_with_linear_gradient_bg, 0);
-    lv_obj_set_size(btn, 150, 50);
-    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 20);
-
-    label = lv_label_create(btn);
-    lv_label_set_text(label, "Linear");
-    lv_obj_center(label);
-
-    /*Complex radial gradient*/
-    btn = lv_button_create(lv_screen_active());
-    lv_obj_add_style(btn, &style_with_radial_gradient_bg, 0);
-    lv_obj_set_size(btn, 150, 50);
-    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 80);
-
-    label = lv_label_create(btn);
-    lv_label_set_text(label, "Radial");
-    lv_obj_center(label);
 }
 
 #else

examples/styles/lv_example_style_19.c

@@ -1,41 +1,99 @@
 #include "../lv_examples.h"
-#if LV_BUILD_EXAMPLES && LV_USE_SLIDER && LV_USE_LOG
+#if LV_BUILD_EXAMPLES
+
+#if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
 
 /**
- * Test between a full background modal and a recolor modal
+ * Using various gradients for button background
  */
 void lv_example_style_19(void)
 {
-    /*Add lv_example_style_11 as background*/
+    static const lv_color_t grad_colors[2] = {
-    lv_example_style_11();
+        LV_COLOR_MAKE(0x26, 0xa0, 0xda),
+        LV_COLOR_MAKE(0x31, 0x47, 0x55),
+    };
 
-    /* Set to 1 to enable recolor overlay instead of solid background */
+    /*Create a linear gradient going from the top left corner to the bottom at an angle, with reflected color map*/
-#if 0
+    static lv_style_t style_with_linear_gradient_bg;
-    /* Apply a screen-wide tint using recolor (efficient overlay).
+    static lv_grad_dsc_t linear_gradient_dsc;     /*NOTE: the gradient descriptor must be static or global variable!*/
-     * This modifies the visual appearance by blending a semi-transparent color
-     * over existing content without creating additional objects.
-     * It’s lighter on performance compared to a full-size background object. */
-    lv_obj_set_style_recolor(lv_screen_active(), lv_color_black(), 0);
-    lv_obj_set_style_recolor_opa(lv_screen_active(), LV_OPA_50, 0);
-#else
-    /* Simulate a modal background by setting a semi-transparent black background
-     * on lv_layer_top(), the highest built-in layer.
-     * This method creates a new full-screen object and can consume more resources
-     * compared to recolor, especially when using images or gradients. */
-    lv_obj_set_style_bg_color(lv_layer_top(), lv_color_black(), 0);
-    lv_obj_set_style_bg_opa(lv_layer_top(), LV_OPA_50, 0);
-#endif
 
-    lv_obj_t * obj = lv_slider_create(lv_layer_top());
+    lv_style_init(&style_with_linear_gradient_bg);
-    lv_obj_center(obj);
+    lv_grad_init_stops(&linear_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+    lv_grad_linear_init(&linear_gradient_dsc, lv_pct(0), lv_pct(0), lv_pct(20), lv_pct(100), LV_GRAD_EXTEND_REFLECT);
+    lv_style_set_bg_grad(&style_with_linear_gradient_bg, &linear_gradient_dsc);
+    lv_style_set_bg_opa(&style_with_linear_gradient_bg, LV_OPA_COVER);
 
-    lv_refr_now(NULL); /*Update layouts and render*/
+    /*Create a radial gradient with the center in the top left 1/3rd of the object, extending to the bottom right corner, with reflected color map*/
+    static lv_style_t style_with_radial_gradient_bg;
+    static lv_grad_dsc_t radial_gradient_dsc;     /*NOTE: the gradient descriptor must be static or global variable!*/
 
-    lv_obj_invalidate(lv_screen_active());
+    lv_style_init(&style_with_radial_gradient_bg);
+    lv_grad_init_stops(&radial_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+    lv_grad_radial_init(&radial_gradient_dsc, lv_pct(30), lv_pct(30), lv_pct(100), lv_pct(100), LV_GRAD_EXTEND_REFLECT);
+    lv_style_set_bg_grad(&style_with_radial_gradient_bg, &radial_gradient_dsc);
+    lv_style_set_bg_opa(&style_with_radial_gradient_bg, LV_OPA_COVER);
 
-    uint32_t t = lv_tick_get();
+    /*Create buttons with different gradient styles*/
-    lv_refr_now(NULL); /*Render only*/
+
-    LV_LOG_USER("%" LV_PRIu32 " ms\n", lv_tick_elaps(t));
+    lv_obj_t * btn;
+    lv_obj_t * label;
+
+    /*Simple horizontal gradient*/
+    btn = lv_button_create(lv_screen_active());
+    lv_obj_set_style_bg_color(btn, grad_colors[0], 0);
+    lv_obj_set_style_bg_grad_color(btn, grad_colors[1], 0);
+    lv_obj_set_style_bg_grad_dir(btn, LV_GRAD_DIR_HOR, 0);
+    lv_obj_set_size(btn, 150, 50);
+    lv_obj_align(btn, LV_ALIGN_CENTER, 0, -100);
+
+    label = lv_label_create(btn);
+    lv_label_set_text(label, "Horizontal");
+    lv_obj_center(label);
+
+    /*Simple vertical gradient*/
+    btn = lv_button_create(lv_screen_active());
+    lv_obj_set_style_bg_color(btn, grad_colors[0], 0);
+    lv_obj_set_style_bg_grad_color(btn, grad_colors[1], 0);
+    lv_obj_set_style_bg_grad_dir(btn, LV_GRAD_DIR_VER, 0);
+    lv_obj_set_size(btn, 150, 50);
+    lv_obj_align(btn, LV_ALIGN_CENTER, 0, -40);
+
+    label = lv_label_create(btn);
+    lv_label_set_text(label, "Vertical");
+    lv_obj_center(label);
+
+    /*Complex linear gradient*/
+    btn = lv_button_create(lv_screen_active());
+    lv_obj_add_style(btn, &style_with_linear_gradient_bg, 0);
+    lv_obj_set_size(btn, 150, 50);
+    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 20);
+
+    label = lv_label_create(btn);
+    lv_label_set_text(label, "Linear");
+    lv_obj_center(label);
+
+    /*Complex radial gradient*/
+    btn = lv_button_create(lv_screen_active());
+    lv_obj_add_style(btn, &style_with_radial_gradient_bg, 0);
+    lv_obj_set_size(btn, 150, 50);
+    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 80);
+
+    label = lv_label_create(btn);
+    lv_label_set_text(label, "Radial");
+    lv_obj_center(label);
 }
 
-#endif
+#else
+
+void lv_example_style_19(void)
+{
+    lv_obj_t * label = lv_label_create(lv_screen_active());
+    lv_obj_set_width(label, LV_PCT(80));
+    lv_label_set_text(label, "LV_USE_DRAW_SW_COMPLEX_GRADIENTS is not enabled");
+    lv_label_set_long_mode(label, LV_LABEL_LONG_MODE_SCROLL_CIRCULAR);
+    lv_obj_center(label);
+}
+
+#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
+
+#endif /*LV_BUILD_EXAMPLES*/

examples/styles/lv_example_style_20.c

@@ -1,164 +1,41 @@
+#include "../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_SLIDER && LV_USE_LOG
+
 /**
- * @file lv_example_style_20.c
+ * Test between a full background modal and a recolor modal
  */
-
-/*********************
- *      INCLUDES
- *********************/
-
-#include "lv_example_style.h"
-
-#if LV_BUILD_EXAMPLES
-
-/*********************
- *      DEFINES
- *********************/
-
-/**********************
- *      TYPEDEFS
- **********************/
-typedef struct {
-    const void * image;
-    const char * name;
-    const char * description;
-} card_info_t;
-
-/**********************
- *  STATIC PROTOTYPES
- **********************/
-static void arc_event_cb(lv_event_t * e);
-static void slider_event_cb(lv_event_t * e);
-static lv_obj_t * card_create(void);
-
-/**********************
- *  STATIC VARIABLES
- **********************/
-static lv_style_t style_card;
-static lv_style_t style_avatar;
-static lv_style_t style_btn;
-static lv_obj_t * card_to_transform;
-LV_IMAGE_DECLARE(img_transform_avatar_15);
-
-/**********************
- *      MACROS
- **********************/
-
-/**********************
- *   GLOBAL FUNCTIONS
- **********************/
 void lv_example_style_20(void)
 {
-    static const int32_t grid_cols[] = {LV_GRID_CONTENT, 4, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
+    /*Add lv_example_style_12 as background*/
-    static const int32_t grid_rows[] = {LV_GRID_CONTENT, -10, LV_GRID_FR(1), LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
+    lv_example_style_12();
 
-    lv_style_init(&style_card);
+    /* Set to 1 to enable recolor overlay instead of solid background */
-    lv_style_set_width(&style_card, 300);
+#if 0
-    lv_style_set_height(&style_card, 120);
+    /* Apply a screen-wide tint using recolor (efficient overlay).
-    lv_style_set_layout(&style_card, LV_LAYOUT_GRID);
+     * This modifies the visual appearance by blending a semi-transparent color
-    lv_style_set_grid_column_dsc_array(&style_card, grid_cols);
+     * over existing content without creating additional objects.
-    lv_style_set_grid_row_dsc_array(&style_card, grid_rows);
+     * It’s lighter on performance compared to a full-size background object. */
-    lv_style_set_shadow_width(&style_card, 20);
+    lv_obj_set_style_recolor(lv_screen_active(), lv_color_black(), 0);
-    lv_style_set_shadow_offset_y(&style_card, 5);
+    lv_obj_set_style_recolor_opa(lv_screen_active(), LV_OPA_50, 0);
-    lv_style_set_shadow_color(&style_card, lv_color_hex3(0xccc));
+#else
-    lv_style_set_border_width(&style_card, 0);
+    /* Simulate a modal background by setting a semi-transparent black background
-    lv_style_set_radius(&style_card, 12);
+     * on lv_layer_top(), the highest built-in layer.
-    lv_style_set_base_dir(&style_card, LV_BASE_DIR_AUTO);
+     * This method creates a new full-screen object and can consume more resources
+     * compared to recolor, especially when using images or gradients. */
+    lv_obj_set_style_bg_color(lv_layer_top(), lv_color_black(), 0);
+    lv_obj_set_style_bg_opa(lv_layer_top(), LV_OPA_50, 0);
+#endif
 
-    lv_style_init(&style_avatar);
+    lv_obj_t * obj = lv_slider_create(lv_layer_top());
-    lv_style_set_shadow_width(&style_avatar, 20);
+    lv_obj_center(obj);
-    lv_style_set_shadow_offset_y(&style_avatar, 5);
-    lv_style_set_shadow_color(&style_avatar, lv_color_hex3(0xbbb));
-    lv_style_set_radius(&style_avatar, LV_RADIUS_CIRCLE);
 
-    lv_style_init(&style_btn);
+    lv_refr_now(NULL); /*Update layouts and render*/
-    lv_style_set_width(&style_btn, 140);
-    lv_style_set_height(&style_btn, 37);
-    lv_style_set_bg_color(&style_btn, lv_color_hex(0x759efe));
-    lv_style_set_bg_grad_color(&style_btn, lv_color_hex(0x4173ff));
-    lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_HOR);
-    lv_style_set_radius(&style_btn, LV_RADIUS_CIRCLE);
-    lv_style_set_shadow_width(&style_btn, 0);
 
-    lv_obj_t * card;
+    lv_obj_invalidate(lv_screen_active());
-    card = card_create();
-    lv_obj_set_style_opa(card, LV_OPA_50, 0);
-    lv_obj_center(card);
 
-    card_to_transform = card_create();
+    uint32_t t = lv_tick_get();
-    lv_obj_center(card_to_transform);
+    lv_refr_now(NULL); /*Render only*/
-
+    LV_LOG_USER("%" LV_PRIu32 " ms\n", lv_tick_elaps(t));
-    int32_t disp_w = lv_display_get_horizontal_resolution(NULL);
-    lv_obj_t * arc = lv_arc_create(lv_screen_active());
-    lv_obj_set_size(arc, disp_w - 20, disp_w - 20);
-    lv_arc_set_range(arc, 0, 270);
-    lv_arc_set_value(arc, 225);
-    lv_obj_add_event_cb(arc, arc_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
-    lv_obj_add_flag(arc, LV_OBJ_FLAG_ADV_HITTEST);
-    lv_obj_center(arc);
-
-    lv_obj_t * slider = lv_slider_create(lv_screen_active());
-    lv_obj_set_width(slider, lv_pct(70));
-    lv_obj_align(slider, LV_ALIGN_BOTTOM_MID, 0, -20);
-    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
-    lv_slider_set_range(slider, 128, 300);
-    lv_slider_set_value(slider, 256, LV_ANIM_OFF);
-}
-
-/**********************
- *   STATIC FUNCTIONS
- **********************/
-
-static lv_obj_t * card_create(void)
-{
-    lv_obj_t * card = lv_obj_create(lv_screen_active());
-    lv_obj_add_style(card, &style_card, 0);
-    lv_obj_remove_flag(card, LV_OBJ_FLAG_CLICKABLE);
-    lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLLABLE);
-    lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLL_CHAIN_HOR);
-
-    lv_obj_t * avatar = lv_image_create(card);
-    lv_image_set_src(avatar, &img_transform_avatar_15);
-    lv_obj_set_grid_cell(avatar, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 4);
-    lv_obj_add_style(avatar, &style_avatar, 0);
-
-    lv_obj_t * name = lv_label_create(card);
-    lv_label_set_text(name, "Pavel Svoboda");
-    lv_obj_set_grid_cell(name, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1);
-    lv_obj_set_style_text_font(name, &lv_font_montserrat_14, 0);
-
-    lv_obj_t * btn = lv_button_create(card);
-    lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLL_CHAIN_HOR);
-    lv_obj_set_grid_cell(btn, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_CENTER, 3, 1);
-    lv_obj_add_style(btn, &style_btn, 0);
-
-    LV_IMAGE_DECLARE(img_multilang_like);
-    lv_obj_t * btn_img = lv_image_create(btn);
-    lv_image_set_src(btn_img, &img_multilang_like);
-    lv_obj_align(btn_img, LV_ALIGN_LEFT_MID, 30, 0);
-
-    lv_obj_t * btn_label = lv_label_create(btn);
-    lv_label_set_text(btn_label, "Like");
-    lv_obj_align(btn_label, LV_ALIGN_LEFT_MID, 60, 1);
-
-    lv_obj_scroll_to_view(card, LV_ANIM_OFF);
-
-    return card;
-}
-
-static void arc_event_cb(lv_event_t * e)
-{
-    lv_obj_t * arc = lv_event_get_target_obj(e);
-
-    int32_t v = (int32_t)lv_arc_get_angle_end(arc);
-    lv_obj_set_style_transform_rotation(card_to_transform, v * 10, 0);
-}
-
-static void slider_event_cb(lv_event_t * e)
-{
-    lv_obj_t * slider = lv_event_get_target_obj(e);
-    int32_t v = lv_slider_get_value(slider);
-    lv_obj_set_style_transform_scale_x(card_to_transform, v, 0);
-    lv_obj_set_style_transform_scale_y(card_to_transform, v, 0);
 }
 
 #endif

examples/styles/lv_example_style_21.c

@@ -0,0 +1,164 @@
+/**
+ * @file lv_example_style_21.c
+ */
+
+/*********************
+ *      INCLUDES
+ *********************/
+
+#include "lv_example_style.h"
+
+#if LV_BUILD_EXAMPLES
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+typedef struct {
+    const void * image;
+    const char * name;
+    const char * description;
+} card_info_t;
+
+/**********************
+ *  STATIC PROTOTYPES
+ **********************/
+static void arc_event_cb(lv_event_t * e);
+static void slider_event_cb(lv_event_t * e);
+static lv_obj_t * card_create(void);
+
+/**********************
+ *  STATIC VARIABLES
+ **********************/
+static lv_style_t style_card;
+static lv_style_t style_avatar;
+static lv_style_t style_btn;
+static lv_obj_t * card_to_transform;
+LV_IMAGE_DECLARE(img_transform_avatar_15);
+
+/**********************
+ *      MACROS
+ **********************/
+
+/**********************
+ *   GLOBAL FUNCTIONS
+ **********************/
+void lv_example_style_21(void)
+{
+    static const int32_t grid_cols[] = {LV_GRID_CONTENT, 4, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
+    static const int32_t grid_rows[] = {LV_GRID_CONTENT, -10, LV_GRID_FR(1), LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
+
+    lv_style_init(&style_card);
+    lv_style_set_width(&style_card, 300);
+    lv_style_set_height(&style_card, 120);
+    lv_style_set_layout(&style_card, LV_LAYOUT_GRID);
+    lv_style_set_grid_column_dsc_array(&style_card, grid_cols);
+    lv_style_set_grid_row_dsc_array(&style_card, grid_rows);
+    lv_style_set_shadow_width(&style_card, 20);
+    lv_style_set_shadow_offset_y(&style_card, 5);
+    lv_style_set_shadow_color(&style_card, lv_color_hex3(0xccc));
+    lv_style_set_border_width(&style_card, 0);
+    lv_style_set_radius(&style_card, 12);
+    lv_style_set_base_dir(&style_card, LV_BASE_DIR_AUTO);
+
+    lv_style_init(&style_avatar);
+    lv_style_set_shadow_width(&style_avatar, 20);
+    lv_style_set_shadow_offset_y(&style_avatar, 5);
+    lv_style_set_shadow_color(&style_avatar, lv_color_hex3(0xbbb));
+    lv_style_set_radius(&style_avatar, LV_RADIUS_CIRCLE);
+
+    lv_style_init(&style_btn);
+    lv_style_set_width(&style_btn, 140);
+    lv_style_set_height(&style_btn, 37);
+    lv_style_set_bg_color(&style_btn, lv_color_hex(0x759efe));
+    lv_style_set_bg_grad_color(&style_btn, lv_color_hex(0x4173ff));
+    lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_HOR);
+    lv_style_set_radius(&style_btn, LV_RADIUS_CIRCLE);
+    lv_style_set_shadow_width(&style_btn, 0);
+
+    lv_obj_t * card;
+    card = card_create();
+    lv_obj_set_style_opa(card, LV_OPA_50, 0);
+    lv_obj_center(card);
+
+    card_to_transform = card_create();
+    lv_obj_center(card_to_transform);
+
+    int32_t disp_w = lv_display_get_horizontal_resolution(NULL);
+    lv_obj_t * arc = lv_arc_create(lv_screen_active());
+    lv_obj_set_size(arc, disp_w - 20, disp_w - 20);
+    lv_arc_set_range(arc, 0, 270);
+    lv_arc_set_value(arc, 225);
+    lv_obj_add_event_cb(arc, arc_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+    lv_obj_add_flag(arc, LV_OBJ_FLAG_ADV_HITTEST);
+    lv_obj_center(arc);
+
+    lv_obj_t * slider = lv_slider_create(lv_screen_active());
+    lv_obj_set_width(slider, lv_pct(70));
+    lv_obj_align(slider, LV_ALIGN_BOTTOM_MID, 0, -20);
+    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+    lv_slider_set_range(slider, 128, 300);
+    lv_slider_set_value(slider, 256, LV_ANIM_OFF);
+}
+
+/**********************
+ *   STATIC FUNCTIONS
+ **********************/
+
+static lv_obj_t * card_create(void)
+{
+    lv_obj_t * card = lv_obj_create(lv_screen_active());
+    lv_obj_add_style(card, &style_card, 0);
+    lv_obj_remove_flag(card, LV_OBJ_FLAG_CLICKABLE);
+    lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLLABLE);
+    lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLL_CHAIN_HOR);
+
+    lv_obj_t * avatar = lv_image_create(card);
+    lv_image_set_src(avatar, &img_transform_avatar_15);
+    lv_obj_set_grid_cell(avatar, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 4);
+    lv_obj_add_style(avatar, &style_avatar, 0);
+
+    lv_obj_t * name = lv_label_create(card);
+    lv_label_set_text(name, "Pavel Svoboda");
+    lv_obj_set_grid_cell(name, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1);
+    lv_obj_set_style_text_font(name, &lv_font_montserrat_14, 0);
+
+    lv_obj_t * btn = lv_button_create(card);
+    lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLL_CHAIN_HOR);
+    lv_obj_set_grid_cell(btn, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_CENTER, 3, 1);
+    lv_obj_add_style(btn, &style_btn, 0);
+
+    LV_IMAGE_DECLARE(img_multilang_like);
+    lv_obj_t * btn_img = lv_image_create(btn);
+    lv_image_set_src(btn_img, &img_multilang_like);
+    lv_obj_align(btn_img, LV_ALIGN_LEFT_MID, 30, 0);
+
+    lv_obj_t * btn_label = lv_label_create(btn);
+    lv_label_set_text(btn_label, "Like");
+    lv_obj_align(btn_label, LV_ALIGN_LEFT_MID, 60, 1);
+
+    lv_obj_scroll_to_view(card, LV_ANIM_OFF);
+
+    return card;
+}
+
+static void arc_event_cb(lv_event_t * e)
+{
+    lv_obj_t * arc = lv_event_get_target_obj(e);
+
+    int32_t v = (int32_t)lv_arc_get_angle_end(arc);
+    lv_obj_set_style_transform_rotation(card_to_transform, v * 10, 0);
+}
+
+static void slider_event_cb(lv_event_t * e)
+{
+    lv_obj_t * slider = lv_event_get_target_obj(e);
+    int32_t v = lv_slider_get_value(slider);
+    lv_obj_set_style_transform_scale_x(card_to_transform, v, 0);
+    lv_obj_set_style_transform_scale_y(card_to_transform, v, 0);
+}
+
+#endif

examples/widgets/chart/lv_example_chart_1.c

@@ -27,6 +27,11 @@ void lv_example_chart_1(void)
         ser2_y_points[i] = (int32_t)lv_rand(50, 90);
     }
 
+    lv_obj_set_style_drop_shadow_opa(chart, 255, LV_PART_ITEMS);
+    lv_obj_set_style_drop_shadow_offset_x(chart, 0, LV_PART_ITEMS);
+    lv_obj_set_style_drop_shadow_radius(chart, 20, LV_PART_ITEMS);
+    /* Drop shadow color follows each series color automatically,
+     * so no manual override is needed. */
     lv_chart_refresh(chart); /*Required after direct set*/
 }
 

examples/widgets/scale/lv_example_scale_10.c

@@ -45,7 +45,7 @@ static void hr_anim_timer_cb(lv_timer_t * timer)
     }
 
     /* Update needle */
-    lv_scale_set_line_needle_value(scale, needle_line, -8, hr_value);
+    lv_scale_set_line_needle_value(scale, needle_line, 180, hr_value);
 
     /* Update HR text */
     lv_label_set_text_fmt(hr_value_label, "%d", hr_value);
@@ -132,7 +132,7 @@ void lv_example_scale_10(void)
 
     int32_t current_hr = 145;
 
-    lv_scale_set_line_needle_value(scale, needle_line, 0, current_hr);
+    lv_scale_set_line_needle_value(scale, needle_line, 50, current_hr);
 
     lv_obj_t * circle = lv_obj_create(lv_screen_active());
     lv_obj_set_size(circle, 130, 130);

scripts/properties.py

@@ -30,6 +30,7 @@ style_properties_type = {
     "LV_STYLE_TEXT_FONT": "LV_PROPERTY_TYPE_FONT",
     "LV_STYLE_TEXT_OUTLINE_STROKE_COLOR": "LV_PROPERTY_TYPE_COLOR",
     "LV_STYLE_TRANSITION": "LV_PROPERTY_TYPE_POINTER",
+    "LV_STYLE_DROP_SHADOW_COLOR": "LV_PROPERTY_TYPE_COLOR",
 }
 
 
@@ -68,16 +69,35 @@ def read_widget_properties(directory):
                         id)
 
     def match_styles(file_path):
-        pattern = r'^\s+LV_STYLE_(\w+)\s*=\s*(\d+),'
+        pattern_with_value = r'^\s+LV_STYLE_(\w+)\s*=\s*(\d+),'
+        pattern_name_only = r'^\s+LV_STYLE_(\w+)\s*,'
+        last_value = 0
+        process = False
         with open(file_path, 'r', encoding='utf-8') as file:
             for line in file.readlines():
-                match = re.match(pattern, line)
+                if re.match("enum _lv_style_id_t", line):
+                    process = True
+                    continue
+
+                if process and re.match("};", line):
+                    return
+
+                if process == False: continue
+                match = re.match(pattern_with_value, line)
+                name = ""
                 if match:
                     name = match.group(1).upper()
+                    last_value = int(match.group(2))
+                else:
+                    match = re.match(pattern_name_only, line)
+                    if match:
+                        name = match.group(1).upper()
+                        last_value += 1
+                if name:
                     id = f"LV_PROPERTY_STYLE_{name}"
                     yield Property("style",
                                    match.group(1).lower(), "style",
-                                   match.group(2), id)
+                                   last_value, id)
 
     properties_by_widget = defaultdict(list)
     for file_path in find_headers(directory):

scripts/style_api_gen.py

@@ -364,7 +364,47 @@ props = [
  'style_type': 'num',  'var_type': 'lv_opa_t',  'default':'`LV_OPA_COVER`', 'inherited': 1, 'layout': 0, 'ext_draw': 0,
  'dsc': "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."},
 
+{'section': 'Blur', 'dsc':'Blur the widget or its background' },
+{'name': 'BLUR_RADIUS',
+ 'style_type': 'num',   'var_type': 'int32_t',  'default':'`0`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,
+ 'dsc': "Sets the intensity of blurring. Applied on each lv_part separately before the children are rendered."},
+
+{'name': 'BLUR_BACKDROP',
+ 'style_type': 'num',   'var_type': 'bool',  'default':'`false`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,
+ 'dsc': "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."},
+
+{'name': 'BLUR_QUALITY',
+ 'style_type': 'num',   'var_type': 'lv_blur_quality_t',  'default':'`LV_BLUR_QUALITY_AUTO`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,
+ 'dsc': "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. "},
+
+{'section': 'Drop shadow', 'dsc':'Take an A8 snapshot of the given part and blur it.' },
+
+{'name': 'DROP_SHADOW_RADIUS',
+ 'style_type': 'num',   'var_type': 'int32_t',  'default':'`0`', 'inherited': 0, 'layout': 0, 'ext_draw': 1,
+ 'dsc': "Sets the intensity of blurring. Applied on each lv_part separately before the children are rendered."},
+
+{'name': 'DROP_SHADOW_OFFSET_X',
+ 'style_type': 'num',   'var_type': 'int32_t',  'default':'`0`', 'inherited': 0, 'layout': 0, 'ext_draw': 1,
+ 'dsc': "Set an offset on the shadow in pixels in X direction."},
+
+{'name': 'DROP_SHADOW_OFFSET_Y',
+ 'style_type': 'num',   'var_type': 'int32_t',  'default':'`0`', 'inherited': 0, 'layout': 0, 'ext_draw': 1,
+ 'dsc': "Set an offset on the shadow in pixels in Y direction."},
+
+{'name': 'DROP_SHADOW_COLOR',
+ 'style_type': 'color',   'var_type': 'lv_color_t',  'default':'`0`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,  'filtered': 1,
+ 'dsc': "Set the color of the shadow."},
+
+{'name': 'DROP_SHADOW_OPA',
+ 'style_type': 'num',   'var_type': 'lv_opa_t',  'default':'`0`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,
+ 'dsc': "Set the opacity of the shadow."},
+
+{'name': 'DROP_SHADOW_QUALITY',
+ 'style_type': 'num',   'var_type': 'lv_blur_quality_t',  'default':'`LV_BLUR_QUALITY_AUTO`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,
+ 'dsc': "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. "},
+
 {'section': 'Miscellaneous', 'dsc':'Mixed properties for various purposes.' },
+
 {'name': 'RADIUS',
  'style_type': 'num', 'var_type': 'int32_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
  'dsc': "Set radius on every corner. The value is interpreted in pixels (>= 0) or `LV_RADIUS_CIRCLE` for max. radius"},
@@ -401,17 +441,6 @@ props = [
  'style_type': 'num',   'var_type': 'lv_opa_t',  'default':'`LV_OPA_TRANSP`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,
  'dsc': "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."},
 
-{'name': 'BLUR_RADIUS',
- 'style_type': 'num',   'var_type': 'int32_t',  'default':'`0`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,
- 'dsc': "Sets the intensity of blurring. Applied on each lv_part separately before the children are rendered."},
-
-{'name': 'BLUR_BACKDROP',
- 'style_type': 'num',   'var_type': 'bool',  'default':'`false`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,
- 'dsc': "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."},
-
-{'name': 'BLUR_QUALITY',
- 'style_type': 'num',   'var_type': 'lv_blur_quality_t',  'default':'`LV_BLUR_QUALITY_AUTO`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,
- 'dsc': "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. "},
 
  {'name': 'ANIM',
  'style_type': 'ptr',   'var_type': 'const lv_anim_t *',  'default':'`NULL`', 'inherited': 0, 'layout': 0, 'ext_draw': 0,

src/core/lv_obj_draw.c

@@ -32,6 +32,8 @@ static lv_color_t normal_apply_layer_recolor(const lv_obj_t * obj, lv_part_t par
 static lv_color32_t image_apply_layer_recolor(const lv_obj_t * obj, lv_part_t part,
                                               const lv_draw_dsc_base_t * base_dsc, lv_color_t color, lv_opa_t opa);
 
+static void drop_shadow_init(const lv_obj_t * obj, lv_part_t part, lv_draw_dsc_base_t * base_dsc);
+
 /**********************
  *  STATIC VARIABLES
  **********************/
@@ -161,6 +163,8 @@ void lv_obj_init_draw_rect_dsc(lv_obj_t * obj, lv_part_t part, lv_draw_rect_dsc_
         draw_dsc->outline_opa = LV_OPA_MIX2(draw_dsc->outline_opa, opa);
     }
 
+    drop_shadow_init(obj, part, &draw_dsc->base);
+
     LV_PROFILER_DRAW_END;
 }
 
@@ -185,6 +189,7 @@ void lv_obj_init_draw_label_dsc(lv_obj_t * obj, lv_part_t part, lv_draw_label_ds
         return;
     }
 
+
     lv_color_t text_color = lv_obj_get_style_text_color_filtered(obj, part);
     draw_dsc->color = normal_apply_layer_recolor(obj, part, &draw_dsc->base, text_color);
     draw_dsc->letter_space = lv_obj_get_style_text_letter_space(obj, part);
@@ -199,6 +204,8 @@ void lv_obj_init_draw_label_dsc(lv_obj_t * obj, lv_part_t part, lv_draw_label_ds
 
     draw_dsc->align = lv_obj_get_style_text_align(obj, part);
 
+    drop_shadow_init(obj, part, &draw_dsc->base);
+
     LV_PROFILER_DRAW_END;
 }
 
@@ -239,6 +246,8 @@ void lv_obj_init_draw_image_dsc(lv_obj_t * obj, lv_part_t part, lv_draw_image_ds
 
     if(part != LV_PART_MAIN) draw_dsc->blend_mode = lv_obj_get_style_blend_mode(obj, part);
 
+    drop_shadow_init(obj, part, &draw_dsc->base);
+
     LV_PROFILER_DRAW_END;
 }
 
@@ -280,6 +289,8 @@ void lv_obj_init_draw_line_dsc(lv_obj_t * obj, lv_part_t part, lv_draw_line_dsc_
     draw_dsc->round_start = lv_obj_get_style_line_rounded(obj, part);
     draw_dsc->round_end = draw_dsc->round_start;
 
+    drop_shadow_init(obj, part, &draw_dsc->base);
+
     LV_PROFILER_DRAW_END;
 }
 
@@ -315,6 +326,9 @@ void lv_obj_init_draw_arc_dsc(lv_obj_t * obj, lv_part_t part, lv_draw_arc_dsc_t
     draw_dsc->img_src = lv_obj_get_style_arc_image_src(obj, part);
 
     draw_dsc->rounded = lv_obj_get_style_arc_rounded(obj, part);
+
+    drop_shadow_init(obj, part, &draw_dsc->base);
+
     LV_PROFILER_DRAW_END;
 }
 
@@ -363,6 +377,15 @@ int32_t lv_obj_calculate_ext_draw_size(lv_obj_t * obj, lv_part_t part)
         }
     }
 
+    int32_t drop_shadow_size = 0;
+    if(lv_obj_get_style_drop_shadow_opa(obj, part) > 0) {
+        drop_shadow_size += LV_MAX(LV_ABS(lv_obj_get_style_drop_shadow_offset_x(obj, part)),
+                                   LV_ABS(lv_obj_get_style_drop_shadow_offset_y(obj, part)));
+
+        drop_shadow_size += lv_obj_get_style_drop_shadow_radius(obj, part) + 1;
+    }
+    s += drop_shadow_size;
+
     int32_t w = lv_obj_get_style_transform_width(obj, part);
     int32_t h = lv_obj_get_style_transform_height(obj, part);
     int32_t wh = LV_MAX(w, h);
@@ -473,3 +496,17 @@ static lv_color32_t image_apply_layer_recolor(const lv_obj_t * obj, lv_part_t pa
         return lv_color_to_32(color, opa);
     }
 }
+
+static void drop_shadow_init(const lv_obj_t * obj, lv_part_t part, lv_draw_dsc_base_t * base_dsc)
+{
+    base_dsc->drop_shadow_opa = lv_obj_get_style_drop_shadow_opa(obj, part);
+    if(base_dsc->drop_shadow_opa) {
+        base_dsc->drop_shadow_blur_radius = lv_obj_get_style_drop_shadow_radius(obj, part);
+        base_dsc->drop_shadow_ofs_x = lv_obj_get_style_drop_shadow_offset_x(obj, part);
+        base_dsc->drop_shadow_ofs_y = lv_obj_get_style_drop_shadow_offset_y(obj, part);
+        base_dsc->drop_shadow_color = lv_obj_get_style_drop_shadow_color(obj, part);
+        base_dsc->drop_shadow_color = normal_apply_layer_recolor(obj, part, base_dsc, base_dsc->drop_shadow_color);
+
+        base_dsc->drop_shadow_quality = lv_obj_get_style_drop_shadow_quality(obj, part);
+    }
+}

src/core/lv_obj_pos.c

@@ -894,7 +894,8 @@ static lv_obj_tree_walk_res_t blur_walk_cb(lv_obj_t * obj, void * user_data)
 
     /*If the widget has blur set, invalidate it*/
     if(lv_area_is_on(blur_data->inv_area, &obj_coords)) {
-        const uint32_t group = (uint32_t)1 << lv_style_get_prop_group(LV_STYLE_BLUR_RADIUS);
+        const uint32_t group_blur = (uint32_t)1 << lv_style_get_prop_group(LV_STYLE_BLUR_RADIUS);
+        const uint32_t group_dropshadow = (uint32_t)1 << lv_style_get_prop_group(LV_STYLE_DROP_SHADOW_OPA);
         const lv_state_t state = lv_obj_style_get_selector_state(lv_obj_get_state(obj));
         const lv_state_t state_inv = ~state;
         lv_style_value_t v;
@@ -902,24 +903,35 @@ static lv_obj_tree_walk_res_t blur_walk_cb(lv_obj_t * obj, void * user_data)
         for(i = 0; i < obj->style_cnt; i++) {
             lv_obj_style_t * obj_style = &obj->styles[i];
             if(obj_style->is_disabled) continue;
-            if((obj_style->style->has_group & group) == 0) continue;
+
             lv_state_t state_style = lv_obj_style_get_selector_state(obj->styles[i].selector);
             if((state_style & state_inv)) continue;
-            if(lv_style_get_prop(obj_style->style, LV_STYLE_BLUR_RADIUS, &v)) {
-                /*Truncate the area to the object*/
-                ext_size = lv_obj_get_ext_draw_size(obj);
-                lv_area_copy(&obj_coords, &obj->coords);
-                obj_coords.x1 -= ext_size;
-                obj_coords.y1 -= ext_size;
-                obj_coords.x2 += ext_size;
-                obj_coords.y2 += ext_size;
 
-                invalidate_area_core(obj, &obj_coords);
+            bool invalidation_needed = false;
-
+            if((obj_style->style->has_group & group_blur) &&
-                /*No need to check the children as the widget is already invalidated
+               lv_style_get_prop(obj_style->style, LV_STYLE_BLUR_RADIUS, &v)) {
-                 *which will redraw the children too*/
+                invalidation_needed = true;
-                return LV_OBJ_TREE_WALK_SKIP_CHILDREN;
             }
+            if((obj_style->style->has_group & group_dropshadow) &&
+               lv_style_get_prop(obj_style->style, LV_STYLE_DROP_SHADOW_OPA, &v)) {
+                invalidation_needed = true;
+            }
+
+            if(invalidation_needed == false) continue;
+
+            /*Truncate the area to the object*/
+            ext_size = lv_obj_get_ext_draw_size(obj);
+            lv_area_copy(&obj_coords, &obj->coords);
+            obj_coords.x1 -= ext_size;
+            obj_coords.y1 -= ext_size;
+            obj_coords.x2 += ext_size;
+            obj_coords.y2 += ext_size;
+
+            invalidate_area_core(obj, &obj_coords);
+
+            /*No need to check the children as the widget is already invalidated
+             *which will redraw the children too*/
+            return LV_OBJ_TREE_WALK_SKIP_CHILDREN;
         }
 
         /*Check the next child, maybe it's blurred*/
@@ -1448,4 +1460,3 @@ static lv_result_t invalidate_area_core(const lv_obj_t * obj, lv_area_t * area_t
     lv_result_t res = lv_inv_area(lv_obj_get_display(obj), area_tmp);
     return res;
 }
-

src/core/lv_obj_style_gen.c

@@ -706,6 +706,78 @@ void lv_obj_set_style_text_outline_stroke_opa(lv_obj_t * obj, lv_opa_t value, lv
     lv_obj_set_local_style_prop(obj, LV_STYLE_TEXT_OUTLINE_STROKE_OPA, v, selector);
 }
 
+void lv_obj_set_style_blur_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_BLUR_RADIUS, v, selector);
+}
+
+void lv_obj_set_style_blur_backdrop(lv_obj_t * obj, bool value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_BLUR_BACKDROP, v, selector);
+}
+
+void lv_obj_set_style_blur_quality(lv_obj_t * obj, lv_blur_quality_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_BLUR_QUALITY, v, selector);
+}
+
+void lv_obj_set_style_drop_shadow_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_DROP_SHADOW_RADIUS, v, selector);
+}
+
+void lv_obj_set_style_drop_shadow_offset_x(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_DROP_SHADOW_OFFSET_X, v, selector);
+}
+
+void lv_obj_set_style_drop_shadow_offset_y(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_DROP_SHADOW_OFFSET_Y, v, selector);
+}
+
+void lv_obj_set_style_drop_shadow_color(lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .color = value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_DROP_SHADOW_COLOR, v, selector);
+}
+
+void lv_obj_set_style_drop_shadow_opa(lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_DROP_SHADOW_OPA, v, selector);
+}
+
+void lv_obj_set_style_drop_shadow_quality(lv_obj_t * obj, lv_blur_quality_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_DROP_SHADOW_QUALITY, v, selector);
+}
+
 void lv_obj_set_style_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
 {
     lv_style_value_t v = {
@@ -746,8 +818,7 @@ void lv_obj_set_style_opa_layered(lv_obj_t * obj, lv_opa_t value, lv_style_selec
     lv_obj_set_local_style_prop(obj, LV_STYLE_OPA_LAYERED, v, selector);
 }
 
-void lv_obj_set_style_color_filter_dsc(lv_obj_t * obj, const lv_color_filter_dsc_t * value,
+void lv_obj_set_style_color_filter_dsc(lv_obj_t * obj, const lv_color_filter_dsc_t * value, lv_style_selector_t selector)
-                                       lv_style_selector_t selector)
 {
     lv_style_value_t v = {
         .ptr = value
@@ -779,30 +850,6 @@ void lv_obj_set_style_recolor_opa(lv_obj_t * obj, lv_opa_t value, lv_style_selec
     lv_obj_set_local_style_prop(obj, LV_STYLE_RECOLOR_OPA, v, selector);
 }
 
-void lv_obj_set_style_blur_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
-{
-    lv_style_value_t v = {
-        .num = (int32_t)value
-    };
-    lv_obj_set_local_style_prop(obj, LV_STYLE_BLUR_RADIUS, v, selector);
-}
-
-void lv_obj_set_style_blur_backdrop(lv_obj_t * obj, bool value, lv_style_selector_t selector)
-{
-    lv_style_value_t v = {
-        .num = (int32_t)value
-    };
-    lv_obj_set_local_style_prop(obj, LV_STYLE_BLUR_BACKDROP, v, selector);
-}
-
-void lv_obj_set_style_blur_quality(lv_obj_t * obj, lv_blur_quality_t value, lv_style_selector_t selector)
-{
-    lv_style_value_t v = {
-        .num = (int32_t)value
-    };
-    lv_obj_set_local_style_prop(obj, LV_STYLE_BLUR_QUALITY, v, selector);
-}
-
 void lv_obj_set_style_anim(lv_obj_t * obj, const lv_anim_t * value, lv_style_selector_t selector)
 {
     lv_style_value_t v = {

src/core/lv_obj_style_gen.h

@@ -614,6 +614,67 @@ static inline lv_opa_t lv_obj_get_style_text_outline_stroke_opa(const lv_obj_t *
     return (lv_opa_t)v.num;
 }
 
+static inline int32_t lv_obj_get_style_blur_radius(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_BLUR_RADIUS);
+    return (int32_t)v.num;
+}
+
+static inline bool lv_obj_get_style_blur_backdrop(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_BLUR_BACKDROP);
+    return (bool)v.num;
+}
+
+static inline lv_blur_quality_t lv_obj_get_style_blur_quality(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_BLUR_QUALITY);
+    return (lv_blur_quality_t)v.num;
+}
+
+static inline int32_t lv_obj_get_style_drop_shadow_radius(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_DROP_SHADOW_RADIUS);
+    return (int32_t)v.num;
+}
+
+static inline int32_t lv_obj_get_style_drop_shadow_offset_x(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_DROP_SHADOW_OFFSET_X);
+    return (int32_t)v.num;
+}
+
+static inline int32_t lv_obj_get_style_drop_shadow_offset_y(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_DROP_SHADOW_OFFSET_Y);
+    return (int32_t)v.num;
+}
+
+static inline lv_color_t lv_obj_get_style_drop_shadow_color(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_DROP_SHADOW_COLOR);
+    return v.color;
+}
+
+static inline lv_color_t lv_obj_get_style_drop_shadow_color_filtered(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part,
+                                                                                          LV_STYLE_DROP_SHADOW_COLOR));
+    return v.color;
+}
+
+static inline lv_opa_t lv_obj_get_style_drop_shadow_opa(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_DROP_SHADOW_OPA);
+    return (lv_opa_t)v.num;
+}
+
+static inline lv_blur_quality_t lv_obj_get_style_drop_shadow_quality(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_DROP_SHADOW_QUALITY);
+    return (lv_blur_quality_t)v.num;
+}
+
 static inline int32_t lv_obj_get_style_radius(const lv_obj_t * obj, lv_part_t part)
 {
     lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_RADIUS);
@@ -668,24 +729,6 @@ static inline lv_opa_t lv_obj_get_style_recolor_opa(const lv_obj_t * obj, lv_par
     return (lv_opa_t)v.num;
 }
 
-static inline int32_t lv_obj_get_style_blur_radius(const lv_obj_t * obj, lv_part_t part)
-{
-    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_BLUR_RADIUS);
-    return (int32_t)v.num;
-}
-
-static inline bool lv_obj_get_style_blur_backdrop(const lv_obj_t * obj, lv_part_t part)
-{
-    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_BLUR_BACKDROP);
-    return (bool)v.num;
-}
-
-static inline lv_blur_quality_t lv_obj_get_style_blur_quality(const lv_obj_t * obj, lv_part_t part)
-{
-    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_BLUR_QUALITY);
-    return (lv_blur_quality_t)v.num;
-}
-
 static inline const lv_anim_t * lv_obj_get_style_anim(const lv_obj_t * obj, lv_part_t part)
 {
     lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_ANIM);
@@ -917,6 +960,15 @@ void lv_obj_set_style_text_align(lv_obj_t * obj, lv_text_align_t value, lv_style
 void lv_obj_set_style_text_outline_stroke_color(lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
 void lv_obj_set_style_text_outline_stroke_width(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_text_outline_stroke_opa(lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
+void lv_obj_set_style_blur_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
+void lv_obj_set_style_blur_backdrop(lv_obj_t * obj, bool value, lv_style_selector_t selector);
+void lv_obj_set_style_blur_quality(lv_obj_t * obj, lv_blur_quality_t value, lv_style_selector_t selector);
+void lv_obj_set_style_drop_shadow_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
+void lv_obj_set_style_drop_shadow_offset_x(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
+void lv_obj_set_style_drop_shadow_offset_y(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
+void lv_obj_set_style_drop_shadow_color(lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
+void lv_obj_set_style_drop_shadow_opa(lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
+void lv_obj_set_style_drop_shadow_quality(lv_obj_t * obj, lv_blur_quality_t value, lv_style_selector_t selector);
 void lv_obj_set_style_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_radial_offset(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_clip_corner(lv_obj_t * obj, bool value, lv_style_selector_t selector);
@@ -927,9 +979,6 @@ void lv_obj_set_style_color_filter_dsc(lv_obj_t * obj, const lv_color_filter_dsc
 void lv_obj_set_style_color_filter_opa(lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
 void lv_obj_set_style_recolor(lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
 void lv_obj_set_style_recolor_opa(lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
-void lv_obj_set_style_blur_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
-void lv_obj_set_style_blur_backdrop(lv_obj_t * obj, bool value, lv_style_selector_t selector);
-void lv_obj_set_style_blur_quality(lv_obj_t * obj, lv_blur_quality_t value, lv_style_selector_t selector);
 void lv_obj_set_style_anim(lv_obj_t * obj, const lv_anim_t * value, lv_style_selector_t selector);
 void lv_obj_set_style_anim_duration(lv_obj_t * obj, uint32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_transition(lv_obj_t * obj, const lv_style_transition_dsc_t * value, lv_style_selector_t selector);

src/draw/lv_draw.c

@@ -538,6 +538,41 @@ void lv_draw_task_get_area(const lv_draw_task_t * t, lv_area_t * area)
     *area = t->area;
 }
 
+lv_layer_t * lv_draw_layer_create_drop_shadow(lv_layer_t * parent_layer, const lv_draw_dsc_base_t * base,
+                                              const lv_area_t * area)
+{
+    lv_area_t drop_shadow_area = *area;
+    int32_t blur_radius = base->drop_shadow_blur_radius;
+
+    /* x2 to have some extra space for cleaner blurring */
+    lv_area_increase(&drop_shadow_area, blur_radius * 2, blur_radius * 2);
+
+    lv_layer_t * ds_layer = lv_draw_layer_create(parent_layer, LV_COLOR_FORMAT_A8, &drop_shadow_area);
+    if(ds_layer == NULL) {
+        LV_LOG_WARN("Failed to create a layer for the drop shadow");
+    }
+    return ds_layer;
+}
+
+void lv_draw_layer_finish_drop_shadow(lv_layer_t * drop_shadow_layer, const lv_draw_dsc_base_t * base)
+{
+    lv_area_t drop_shadow_area = drop_shadow_layer->buf_area;
+    lv_draw_blur_dsc_t blur_dsc;
+    lv_draw_blur_dsc_init(&blur_dsc);
+    blur_dsc.blur_radius = base->drop_shadow_blur_radius;
+    blur_dsc.quality = base->drop_shadow_quality;
+    lv_draw_blur(drop_shadow_layer, &blur_dsc, &drop_shadow_layer->buf_area);
+
+    lv_area_move(&drop_shadow_area, base->drop_shadow_ofs_x, base->drop_shadow_ofs_y);
+
+    lv_draw_image_dsc_t layer_draw_dsc;
+    lv_draw_image_dsc_init(&layer_draw_dsc);
+    layer_draw_dsc.src = drop_shadow_layer;
+    layer_draw_dsc.recolor = base->drop_shadow_color;
+    layer_draw_dsc.opa = base->drop_shadow_opa;
+    lv_draw_layer(drop_shadow_layer->parent, &layer_draw_dsc, &drop_shadow_area);
+}
+
 /**********************
  *   STATIC FUNCTIONS
  **********************/

src/draw/lv_draw.h

@@ -162,6 +162,26 @@ typedef struct {
     /**The target layer */
     lv_layer_t * layer;
 
+    /*Drop shadow is part of every draw dsc as anything can have drop shadow*/
+
+    /**Drop shadow offset in X*/
+    int16_t drop_shadow_ofs_x;
+
+    /**Drop shadow offset in Y*/
+    int16_t drop_shadow_ofs_y;
+
+    /**Drop shadow color*/
+    lv_color_t drop_shadow_color;
+
+    /**Drop shadow opacity*/
+    lv_opa_t drop_shadow_opa;
+
+    /**Drop shadow blur radius*/
+    int32_t drop_shadow_blur_radius: 20;
+
+    /**Drop shadow blur quality*/
+    lv_blur_quality_t drop_shadow_quality : 3;
+
     /**Size of the specific draw descriptor into which this base descriptor is embedded*/
     size_t dsc_size;
 
@@ -351,6 +371,14 @@ void * lv_draw_task_get_draw_dsc(const lv_draw_task_t * t);
 */
 void lv_draw_task_get_area(const lv_draw_task_t * t, lv_area_t * area);
 
+
+
+lv_layer_t * lv_draw_layer_create_drop_shadow(lv_layer_t * parent_layer, const lv_draw_dsc_base_t * base,
+                                              const lv_area_t * area);
+
+void lv_draw_layer_finish_drop_shadow(lv_layer_t * drop_shadow_layer, const lv_draw_dsc_base_t * base);
+
+
 /**********************
  *  GLOBAL VARIABLES
  **********************/

src/draw/lv_draw_arc.c

@@ -62,6 +62,16 @@ void lv_draw_arc(lv_layer_t * layer, const lv_draw_arc_dsc_t * dsc)
     a.y1 = dsc->center.y - dsc->radius;
     a.x2 = dsc->center.x + dsc->radius - 1;
     a.y2 = dsc->center.y + dsc->radius - 1;
+
+    if(dsc->base.drop_shadow_opa) {
+        lv_layer_t * ds_layer = lv_draw_layer_create_drop_shadow(layer, &dsc->base, &a);
+        LV_ASSERT_NULL(ds_layer);
+        lv_draw_arc_dsc_t ds_dsc = *dsc;
+        ds_dsc.base.drop_shadow_opa = 0; /*Disable drop shadow so rendering below will render plain arc*/
+        lv_draw_arc(ds_layer, &ds_dsc);
+        lv_draw_layer_finish_drop_shadow(ds_layer, &dsc->base);
+    }
+
     lv_draw_task_t * t = lv_draw_add_task(layer, &a, LV_DRAW_TASK_TYPE_ARC);
 
     lv_memcpy(t->draw_dsc, dsc, sizeof(*dsc));

src/draw/lv_draw_image.c

@@ -110,6 +110,15 @@ void lv_draw_image(lv_layer_t * layer, const lv_draw_image_dsc_t * dsc, const lv
 
     LV_PROFILER_DRAW_BEGIN;
 
+    if(dsc->base.drop_shadow_opa) {
+        lv_layer_t * ds_layer = lv_draw_layer_create_drop_shadow(layer, &dsc->base, image_coords);
+        LV_ASSERT_NULL(ds_layer);
+        lv_draw_image_dsc_t ds_dsc = *dsc;
+        ds_dsc.base.drop_shadow_opa = 0; /*Disable drop shadow so rendering below will render plain image*/
+        lv_draw_image(ds_layer, &ds_dsc, image_coords);
+        lv_draw_layer_finish_drop_shadow(ds_layer, &dsc->base);
+    }
+
     lv_draw_image_dsc_t new_image_dsc;
     lv_memcpy(&new_image_dsc, dsc, sizeof(*dsc));
     lv_result_t res = lv_image_decoder_get_info(new_image_dsc.src, &new_image_dsc.header);

src/draw/lv_draw_label.c

@@ -111,6 +111,17 @@ void LV_ATTRIBUTE_FAST_MEM lv_draw_label(lv_layer_t * layer, const lv_draw_label
         return;
     }
     LV_PROFILER_DRAW_BEGIN;
+
+    if(dsc->base.drop_shadow_opa) {
+        lv_layer_t * ds_layer = lv_draw_layer_create_drop_shadow(layer, &dsc->base, coords);
+        LV_ASSERT_NULL(ds_layer);
+        lv_draw_label_dsc_t ds_dsc = *dsc;
+        ds_dsc.base.drop_shadow_opa = 0; /*Disable drop shadow so rendering below will render plain label*/
+        lv_draw_label(ds_layer, &ds_dsc, coords);
+        lv_draw_layer_finish_drop_shadow(ds_layer, &dsc->base);
+    }
+
+
     lv_draw_task_t * t = lv_draw_add_task(layer, coords, LV_DRAW_TASK_TYPE_LABEL);
 
     lv_memcpy(t->draw_dsc, dsc, sizeof(*dsc));

src/draw/lv_draw_line.c

@@ -63,6 +63,15 @@ void LV_ATTRIBUTE_FAST_MEM lv_draw_line(lv_layer_t * layer, const lv_draw_line_d
     a.y1 = (int32_t)LV_MIN(dsc->p1.y, dsc->p2.y) - dsc->width;
     a.y2 = (int32_t)LV_MAX(dsc->p1.y, dsc->p2.y) + dsc->width;
 
+    if(dsc->base.drop_shadow_opa) {
+        lv_layer_t * ds_layer = lv_draw_layer_create_drop_shadow(layer, &dsc->base, &a);
+        LV_ASSERT_NULL(ds_layer);
+        lv_draw_line_dsc_t ds_dsc = *dsc;
+        ds_dsc.base.drop_shadow_opa = 0; /*Disable drop shadow so rendering below will render plain line*/
+        lv_draw_line(ds_layer, &ds_dsc);
+        lv_draw_layer_finish_drop_shadow(ds_layer, &dsc->base);
+    }
+
     lv_draw_task_t * t = lv_draw_add_task(layer, &a, LV_DRAW_TASK_TYPE_LINE);
 
     lv_memcpy(t->draw_dsc, dsc, sizeof(*dsc));

src/draw/lv_draw_rect.c

@@ -74,6 +74,16 @@ void lv_draw_fill(lv_layer_t * layer, const lv_draw_fill_dsc_t * dsc, const lv_a
     if(dsc->opa <= LV_OPA_MIN) return;
 
     LV_PROFILER_DRAW_BEGIN;
+
+    if(dsc->base.drop_shadow_opa) {
+        lv_layer_t * ds_layer = lv_draw_layer_create_drop_shadow(layer, &dsc->base, coords);
+        LV_ASSERT_NULL(ds_layer);
+        lv_draw_fill_dsc_t ds_dsc = *dsc;
+        ds_dsc.base.drop_shadow_opa = 0; /*Disable drop shadow so rendering below will render plain fill*/
+        lv_draw_fill(ds_layer, &ds_dsc, coords);
+        lv_draw_layer_finish_drop_shadow(ds_layer, &dsc->base);
+    }
+
     lv_draw_task_t * t = lv_draw_add_task(layer, coords, LV_DRAW_TASK_TYPE_FILL);
 
     lv_memcpy(t->draw_dsc, dsc, sizeof(*dsc));
@@ -100,6 +110,16 @@ void lv_draw_border(lv_layer_t * layer, const lv_draw_border_dsc_t * dsc, const
     if(dsc->opa <= LV_OPA_MIN) return;
 
     LV_PROFILER_DRAW_BEGIN;
+
+    if(dsc->base.drop_shadow_opa) {
+        lv_layer_t * ds_layer = lv_draw_layer_create_drop_shadow(layer, &dsc->base, coords);
+        LV_ASSERT_NULL(ds_layer);
+        lv_draw_border_dsc_t ds_dsc = *dsc;
+        ds_dsc.base.drop_shadow_opa = 0; /*Disable drop shadow so rendering below will render plain border*/
+        lv_draw_border(ds_layer, &ds_dsc, coords);
+        lv_draw_layer_finish_drop_shadow(ds_layer, &dsc->base);
+    }
+
     lv_draw_task_t * t = lv_draw_add_task(layer, coords, LV_DRAW_TASK_TYPE_BORDER);
 
     lv_memcpy(t->draw_dsc, dsc, sizeof(*dsc));
@@ -137,6 +157,7 @@ void lv_draw_rect(lv_layer_t * layer, const lv_draw_rect_dsc_t * dsc, const lv_a
 {
 
     LV_PROFILER_DRAW_BEGIN;
+
     bool has_shadow;
     bool has_fill;
     bool has_border;
@@ -180,6 +201,16 @@ void lv_draw_rect(lv_layer_t * layer, const lv_draw_rect_dsc_t * dsc, const lv_a
         }
     }
 
+    if(dsc->base.drop_shadow_opa && (has_fill || has_outline)) {
+        lv_layer_t * ds_layer = lv_draw_layer_create_drop_shadow(layer, &dsc->base, coords);
+        LV_ASSERT_NULL(ds_layer);
+        lv_draw_rect_dsc_t ds_dsc = *dsc;
+        ds_dsc.base.drop_shadow_opa = 0; /*Disable drop shadow so rendering below will render plain shadow*/
+        ds_dsc.shadow_opa = 0;
+        lv_draw_rect(ds_layer, &ds_dsc, coords);
+        lv_draw_layer_finish_drop_shadow(ds_layer, &dsc->base);
+    }
+
     lv_draw_task_t * t;
 
     /*Shadow*/

src/draw/lv_draw_triangle.c

@@ -69,6 +69,16 @@ void lv_draw_triangle(lv_layer_t * layer, const lv_draw_triangle_dsc_t * dsc)
     a.x2 = (int32_t)LV_MAX3(dsc->p[0].x, dsc->p[1].x, dsc->p[2].x);
     a.y2 = (int32_t)LV_MAX3(dsc->p[0].y, dsc->p[1].y, dsc->p[2].y);
 
+    if(dsc->base.drop_shadow_opa) {
+        lv_layer_t * ds_layer = lv_draw_layer_create_drop_shadow(layer, &dsc->base, &a);
+        LV_ASSERT_NULL(ds_layer);
+        lv_draw_triangle_dsc_t ds_dsc = *dsc;
+        ds_dsc.base.drop_shadow_opa = 0; /*Disable drop shadow so rendering below will render plain triangle*/
+        lv_draw_triangle(ds_layer, &ds_dsc);
+        lv_draw_layer_finish_drop_shadow(ds_layer, &dsc->base);
+    }
+
+
     lv_draw_task_t * t = lv_draw_add_task(layer, &a, LV_DRAW_TASK_TYPE_TRIANGLE);
 
     lv_memcpy(t->draw_dsc, dsc, sizeof(*dsc));

src/draw/sw/blend/lv_draw_sw_blend.c

@@ -10,6 +10,9 @@
 #include "lv_draw_sw_blend_private.h"
 #include "../../lv_draw_private.h"
 #include "../lv_draw_sw.h"
+#if LV_DRAW_SW_SUPPORT_A8
+    #include "lv_draw_sw_blend_to_a8.h"
+#endif
 #if LV_DRAW_SW_SUPPORT_L8
     #include "lv_draw_sw_blend_to_l8.h"
 #endif
@@ -205,6 +208,11 @@ static inline void LV_ATTRIBUTE_FAST_MEM lv_draw_sw_blend_color(lv_color_format_
             lv_draw_sw_blend_color_to_argb8888_premultiplied(fill_dsc);
             break;
 #endif
+#if LV_DRAW_SW_SUPPORT_A8
+        case LV_COLOR_FORMAT_A8:
+            lv_draw_sw_blend_color_to_a8(fill_dsc);
+            break;
+#endif
 #if LV_DRAW_SW_SUPPORT_L8
         case LV_COLOR_FORMAT_L8:
             lv_draw_sw_blend_color_to_l8(fill_dsc);
@@ -260,6 +268,11 @@ static inline void LV_ATTRIBUTE_FAST_MEM lv_draw_sw_blend_image(lv_color_format_
             lv_draw_sw_blend_image_to_argb8888_premultiplied(image_dsc);
             break;
 #endif
+#if LV_DRAW_SW_SUPPORT_A8
+        case LV_COLOR_FORMAT_A8:
+            lv_draw_sw_blend_image_to_a8(image_dsc);
+            break;
+#endif
 #if LV_DRAW_SW_SUPPORT_L8
         case LV_COLOR_FORMAT_L8:
             lv_draw_sw_blend_image_to_l8(image_dsc);

src/draw/sw/blend/lv_draw_sw_blend_to_a8.h

@@ -0,0 +1,45 @@
+/**
+ * @file lv_draw_sw_blend_to_a8.h
+ *
+ */
+
+#ifndef LV_DRAW_SW_BLEND_TO_A8_H
+#define LV_DRAW_SW_BLEND_TO_A8_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+/*********************
+ *      INCLUDES
+ *********************/
+#include "../lv_draw_sw.h"
+#if LV_USE_DRAW_SW
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/**********************
+ * GLOBAL PROTOTYPES
+ **********************/
+
+void /* LV_ATTRIBUTE_FAST_MEM */ lv_draw_sw_blend_color_to_a8(lv_draw_sw_blend_fill_dsc_t * dsc);
+
+void /* LV_ATTRIBUTE_FAST_MEM */ lv_draw_sw_blend_image_to_a8(lv_draw_sw_blend_image_dsc_t * dsc);
+
+/**********************
+ *      MACROS
+ **********************/
+
+#endif /*LV_USE_DRAW_SW*/
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif /*LV_DRAW_SW_BLEND_TO_A8_H*/

src/draw/sw/lv_draw_sw_blur.c

@@ -33,6 +33,9 @@
  *  STATIC PROTOTYPES
  **********************/
 
+static void blur_1_bytes_init(uint32_t * sum, uint8_t * buf, uint32_t sample_len, int32_t stride);
+static inline uint8_t blur_1_bytes(uint32_t * sum, uint8_t px, uint32_t intensity);
+
 static void blur_2_bytes_init(uint32_t * sum, lv_color16_t * buf, uint32_t sample_len, int32_t stride, bool swapped);
 static inline uint16_t blur_2_bytes(uint32_t * sum, uint16_t px, uint32_t intensity, bool swapped);
 
@@ -58,9 +61,11 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
     if(dsc->blur_radius == 0) return;
     LV_PROFILER_DRAW_BEGIN;
 
+    int32_t layer_x_ofs = t->target_layer->buf_area.x1;
+    int32_t layer_y_ofs = t->target_layer->buf_area.y1;
     lv_area_t clipped_coords;
     if(!lv_area_intersect(&clipped_coords, coords, &t->clip_area)) return;
-    lv_area_move(&clipped_coords, -t->target_layer->buf_area.x1, -t->target_layer->buf_area.y1);
+    lv_area_move(&clipped_coords, -layer_x_ofs, -layer_y_ofs);
 
     uint32_t blur_radius = dsc->blur_radius;
 
@@ -71,7 +76,8 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
      */
     int32_t skip_cnt = 1;
     if(dsc->quality == LV_BLUR_QUALITY_AUTO) {
-        if(blur_radius >= 32 && dsc->corner_radius == 0) skip_cnt = 3;
+        int32_t size = lv_area_get_size(&clipped_coords);
+        if(blur_radius >= 32 && dsc->corner_radius == 0 && size > 160 * 160) skip_cnt = 3;
         else if(blur_radius >= 8) skip_cnt = 2;
     }
     else if(dsc->quality == LV_BLUR_QUALITY_SPEED) {
@@ -107,6 +113,7 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
     int32_t stride_byte = t->target_layer->draw_buf->header.stride;
     int32_t stride_px = stride_byte / px_size;
     int32_t next_px_ofs_byte = px_size * skip_cnt;
+    bool swapped = t->target_layer->draw_buf->header.cf == LV_COLOR_FORMAT_RGB565_SWAPPED;
 
     uint32_t sum[3];
     int32_t y;
@@ -114,9 +121,9 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
 
     /*Blur each column top to bottom and bottom to top.*/
     for(x = clipped_coords.x1; x <= clipped_coords.x2; x += skip_cnt) {
-        int32_t cir_y = get_rounded_edge_point(coords->x1, coords->x2, x, radius);
+        int32_t cir_y = get_rounded_edge_point(coords->x1, coords->x2, layer_x_ofs + x, radius);
-        int32_t y_start = LV_CLAMP(clipped_coords.y1, coords->y1 + cir_y, clipped_coords.y2);
+        int32_t y_start = LV_CLAMP(clipped_coords.y1, coords->y1 - layer_y_ofs + cir_y, clipped_coords.y2);
-        int32_t y_end = LV_CLAMP(clipped_coords.y1, coords->y2 - cir_y, clipped_coords.y2);
+        int32_t y_end = LV_CLAMP(clipped_coords.y1, coords->y2  - layer_y_ofs - cir_y, clipped_coords.y2);
 
         /*Make sure that the width and height is a multiple of skip_cnt so that back and forth blurring
          *surely affects the same pixels */
@@ -126,47 +133,71 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
 
         uint32_t sample_len_limited = LV_MIN((y_end - y_start) / skip_cnt + 1, sample_len);
 
-        if(px_size >= 3) {
+        if(px_size == 1) {
             /*Compiler optimization might mishandle it, so add volatile*/
-            volatile uint8_t * buf_column = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_start);
+            uint8_t * buf_column_start = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_start);
-            blur_3_bytes_init(sum, buf_column, sample_len_limited, stride_byte * skip_cnt);
+            blur_1_bytes_init(sum, buf_column_start, sample_len_limited, stride_byte * skip_cnt);
 
+            uint8_t buf_prev = buf_column_start[0] + 1; /*Make sure that it's not equal in the first round*/
             for(y = y_start; y <= y_end; y += skip_cnt) {
-                blur_3_bytes(sum, buf_column, intensity);
+                if(buf_prev != *buf_column_start) {
-                buf_column += stride_byte * skip_cnt;
+                    *buf_column_start = blur_1_bytes(sum, *buf_column_start, intensity);
+                    buf_prev = *buf_column_start;
+                }
+                buf_column_start += stride_byte * skip_cnt;
             }
 
-            buf_column = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_end);
+            uint8_t * buf_column_end = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_end);
-            blur_3_bytes_init(sum, buf_column, sample_len_limited, -stride_byte * skip_cnt);
+            blur_1_bytes_init(sum, buf_column_end, sample_len_limited, -stride_byte * skip_cnt);
+            buf_prev = buf_column_end[0] + 1; /*Make sure that it's not equal in the first round*/
             for(y = y_start; y <= y_end; y += skip_cnt) {
-                blur_3_bytes(sum, buf_column, intensity);
+                if(buf_prev != *buf_column_end) {
-                buf_column -= stride_byte * skip_cnt;
+                    *buf_column_end = blur_1_bytes(sum, *buf_column_end, intensity);
+                    buf_prev = *buf_column_end;
+                }
+                buf_column_end -= stride_byte * skip_cnt;
             }
         }
         else if(px_size == 2) {
-            bool swapped = t->target_layer->draw_buf->header.cf == LV_COLOR_FORMAT_RGB565_SWAPPED;
+            uint16_t * buf16_column_start = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_start);
-            uint16_t * buf16_column = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_start);
+            blur_2_bytes_init(sum, (lv_color16_t *)buf16_column_start, sample_len_limited, stride_px * skip_cnt, swapped);
-            blur_2_bytes_init(sum, (lv_color16_t *)buf16_column, sample_len_limited, stride_px * skip_cnt, swapped);
+            uint16_t buf16_prev = buf16_column_start[0] + 1; /*Make sure that it's not equal in the first round*/
-            uint16_t buf16_prev = buf16_column[0] + 1; /*Make sure that it's not equal in the first round*/
 
             for(y = y_start; y <= y_end; y += skip_cnt) {
-                if(buf16_prev != *buf16_column) {
+                if(buf16_prev != *buf16_column_start) {
-                    *buf16_column = blur_2_bytes(sum, *buf16_column, intensity, swapped);
+                    *buf16_column_start = blur_2_bytes(sum, *buf16_column_start, intensity, swapped);
-                    buf16_prev = *buf16_column;
+                    buf16_prev = *buf16_column_start;
                 }
-                buf16_column += stride_px * skip_cnt;
+                buf16_column_start += stride_px * skip_cnt;
             }
 
-            buf16_column = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_end);
+            uint16_t * buf16_column_end = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_end);
-            blur_2_bytes_init(sum, (lv_color16_t *)buf16_column, sample_len_limited, -stride_px * skip_cnt, swapped);
+            blur_2_bytes_init(sum, (lv_color16_t *)buf16_column_end, sample_len_limited, -stride_px * skip_cnt, swapped);
-            buf16_prev = buf16_column[0] + 1; /*Make sure that it's not equal in the first round*/
+            buf16_prev = buf16_column_end[0] + 1; /*Make sure that it's not equal in the first round*/
 
             for(y = y_start; y <= y_end; y += skip_cnt) {
-                if(buf16_prev != *buf16_column) {
+                if(buf16_prev != *buf16_column_end) {
-                    *buf16_column = blur_2_bytes(sum, *buf16_column, intensity, swapped);
+                    *buf16_column_end = blur_2_bytes(sum, *buf16_column_end, intensity, swapped);
-                    buf16_prev = *buf16_column;
+                    buf16_prev = *buf16_column_end;
                 }
-                buf16_column -= stride_px * skip_cnt;
+                buf16_column_end -= stride_px * skip_cnt;
+            }
+        }
+        else if(px_size >= 3) {
+            /*Compiler optimization might mishandle it, so add volatile*/
+            volatile uint8_t * buf_column_start = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_start);
+            blur_3_bytes_init(sum, buf_column_start, sample_len_limited, stride_byte * skip_cnt);
+
+            for(y = y_start; y <= y_end; y += skip_cnt) {
+                blur_3_bytes(sum, buf_column_start, intensity);
+                buf_column_start += stride_byte * skip_cnt;
+            }
+
+            volatile uint8_t * buf_column_end = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x, y_end);
+            blur_3_bytes_init(sum, buf_column_end, sample_len_limited, -stride_byte * skip_cnt);
+            for(y = y_start; y <= y_end; y += skip_cnt) {
+                blur_3_bytes(sum, buf_column_end, intensity);
+                buf_column_end -= stride_byte * skip_cnt;
             }
         }
     }
@@ -174,9 +205,9 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
     /*Blur each line from left to right and right to left.
      *Also fill the gap in each line because of skipped pixels*/
     for(y = clipped_coords.y1; y <= clipped_coords.y2; y += skip_cnt) {
-        int32_t cir_x = get_rounded_edge_point(coords->y1, coords->y2, y, radius);
+        int32_t cir_x = get_rounded_edge_point(coords->y1, coords->y2, layer_y_ofs + y, radius);
-        int32_t x_start = LV_CLAMP(clipped_coords.x1, coords->x1 + cir_x, clipped_coords.x2);
+        int32_t x_start = LV_CLAMP(clipped_coords.x1, coords->x1  - layer_x_ofs + cir_x, clipped_coords.x2);
-        int32_t x_end = LV_CLAMP(clipped_coords.x1, coords->x2 - cir_x, clipped_coords.x2);
+        int32_t x_end = LV_CLAMP(clipped_coords.x1, coords->x2  - layer_x_ofs - cir_x, clipped_coords.x2);
 
         /*Make sure that the width and height is a multiple of skip_cnt so that back and forth blurring
          *surely affects the same pixels */
@@ -187,35 +218,39 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
         uint32_t line_len_byte = (x_end - x_start + skip_cnt) * px_size;
         uint32_t sample_len_limited = LV_MIN((x_end - x_start) / skip_cnt + 1, sample_len);
 
-        if(px_size >= 3) {
-            /*Compiler optimization might mishandle it, so add volatile*/
-            volatile uint8_t * buf_line = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_start, y);
 
-            blur_3_bytes_init(sum, buf_line, sample_len_limited, px_size * skip_cnt);
+        if(px_size == 1) {
-            buf_line += px_size * skip_cnt;
+            /*Compiler optimization might mishandle it, so add volatile*/
+            uint8_t * buf_line_start = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_start, y);
+
+            blur_1_bytes_init(sum, buf_line_start, sample_len_limited, px_size * skip_cnt);
+
+            uint8_t buf_prev = buf_line_start[0] + 1; /*Make sure that it's not equal in the first round*/
             for(x = x_start + skip_cnt; x <= x_end; x += skip_cnt) {
-                blur_3_bytes(sum, buf_line, intensity);
+                if(buf_prev != *buf_line_start) {
-                buf_line += next_px_ofs_byte;
+                    *buf_line_start = blur_1_bytes(sum, *buf_line_start, intensity);
+                    buf_prev = *buf_line_start;
+                }
+                buf_line_start += next_px_ofs_byte;
             }
 
-            buf_line = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_end, y);
+            uint8_t * buf_line_end = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_end, y);
-            blur_3_bytes_init(sum, buf_line, sample_len_limited, -(int32_t)px_size * skip_cnt);
+            blur_1_bytes_init(sum, buf_line_end, sample_len_limited, - px_size * skip_cnt);
+            buf_prev = buf_line_end[0] + 1; /*Make sure that it's not equal in the first round*/
+
             for(x = x_start; x <= x_end; x += skip_cnt) {
-                blur_3_bytes(sum, buf_line, intensity);
+                if(buf_prev != *buf_line_end) {
+                    *buf_line_end = blur_1_bytes(sum, *buf_line_end, intensity);
+                    buf_prev = *buf_line_end;
+                }
 
                 /*This is the final pixel, fill the gaps in the line by just repeating the pixel (simple upscale)*/
                 if(skip_cnt == 2) {
-                    buf_line[px_size + 0] = buf_line[0];
+                    buf_line_end[1] = buf_line_end[0];
-                    buf_line[px_size + 1] = buf_line[1];
-                    buf_line[px_size + 2] = buf_line[2];
                 }
                 else if(skip_cnt == 3) {
-                    buf_line[px_size + 0] = buf_line[0];
+                    buf_line_end[1] = buf_line_end[0];
-                    buf_line[px_size + 1] = buf_line[1];
+                    buf_line_end[2] = buf_line_end[0];
-                    buf_line[px_size + 2] = buf_line[2];
-                    buf_line[px_size * 2 + 0] = buf_line[0];
-                    buf_line[px_size * 2 + 1] = buf_line[1];
-                    buf_line[px_size * 2 + 2] = buf_line[2];
                 }
 
                 /*Fill the empty lines by duplicating a the finished filled lines to the gaps*/
@@ -227,43 +262,43 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
                     }
                 }
 
-                buf_line -= next_px_ofs_byte;
+                buf_line_end -= next_px_ofs_byte;
             }
 
         }
         else if(px_size == 2) {
-            bool swapped = t->target_layer->draw_buf->header.cf == LV_COLOR_FORMAT_RGB565_SWAPPED;
+            uint16_t * buf16_line_start = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_start, y);
-            uint16_t * buf16_line = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_start, y);
+            blur_2_bytes_init(sum, (lv_color16_t *)buf16_line_start, sample_len_limited,  skip_cnt, swapped);
-            blur_2_bytes_init(sum, (lv_color16_t *)buf16_line, sample_len_limited,  skip_cnt, swapped);
-            uint16_t buf16_prev = buf16_line[0] + 1; /*Make sure that it's not equal in the first round*/
 
+            uint16_t buf16_prev = buf16_line_start[0] + 1; /*Make sure that it's not equal in the first round*/
             for(x = x_start; x <= x_end; x += skip_cnt) {
-                if(buf16_prev != *buf16_line) {
+
-                    *buf16_line = blur_2_bytes(sum, *buf16_line, intensity, swapped);
+                if(buf16_prev != *buf16_line_start) {
-                    buf16_prev = *buf16_line;
+                    *buf16_line_start = blur_2_bytes(sum, *buf16_line_start, intensity, swapped);
+                    buf16_prev = *buf16_line_start;
                 }
-                buf16_line += skip_cnt;
+                buf16_line_start += skip_cnt;
             }
 
-            buf16_line = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_end, y);
+            uint16_t * buf16_line_end = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_end, y);
-            blur_2_bytes_init(sum, (lv_color16_t *)buf16_line, sample_len_limited, - skip_cnt, swapped);
+            blur_2_bytes_init(sum, (lv_color16_t *)buf16_line_end, sample_len_limited, - skip_cnt, swapped);
-            buf16_prev = buf16_line[0] + 1; /*Make sure that it's not equal in the first round*/
+            buf16_prev = buf16_line_end[0] + 1; /*Make sure that it's not equal in the first round*/
 
             for(x = x_start; x <= x_end; x += skip_cnt) {
-                if(buf16_prev != *buf16_line) {
+                if(buf16_prev != *buf16_line_end) {
-                    *buf16_line = blur_2_bytes(sum, *buf16_line, intensity, swapped);
+                    *buf16_line_end = blur_2_bytes(sum, *buf16_line_end, intensity, swapped);
-                    buf16_prev = *buf16_line;
+                    buf16_prev = *buf16_line_end;
                 }
 
                 /*This is the final pixel, fill the gaps in the line by just repeating the pixel (simple upscale)*/
                 if(skip_cnt == 2) {
                     /*Fill the empty lines by duplicating a the finished filled lines to the gaps*/
-                    buf16_line[1] = buf16_line[0];
+                    buf16_line_end[1] = buf16_line_end[0];
                 }
                 else if(skip_cnt == 3) {
                     /*Fill the empty lines by duplicating a the finished filled lines to the gaps*/
-                    buf16_line[1] = buf16_line[0];
+                    buf16_line_end[1] = buf16_line_end[0];
-                    buf16_line[2] = buf16_line[0];
+                    buf16_line_end[2] = buf16_line_end[0];
                 }
 
                 /*Fill the empty lines by duplicating a the finished filled lines to the gaps*/
@@ -275,9 +310,53 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
                     }
                 }
 
-                buf16_line -= skip_cnt;
+                buf16_line_end -= skip_cnt;
             }
         }
+        else if(px_size >= 3) {
+            /*Compiler optimization might mishandle it, so add volatile*/
+            volatile uint8_t * buf_line_start = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_start, y);
+
+            blur_3_bytes_init(sum, buf_line_start, sample_len_limited, px_size * skip_cnt);
+            for(x = x_start + skip_cnt; x <= x_end; x += skip_cnt) {
+                blur_3_bytes(sum, buf_line_start, intensity);
+                buf_line_start += next_px_ofs_byte;
+            }
+
+            volatile uint8_t * buf_line_end = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_end, y);
+            blur_3_bytes_init(sum, buf_line_end, sample_len_limited, - px_size * skip_cnt);
+
+            for(x = x_start; x <= x_end; x += skip_cnt) {
+                blur_3_bytes(sum, buf_line_end, intensity);
+
+                /*This is the final pixel, fill the gaps in the line by just repeating the pixel (simple upscale)*/
+                if(skip_cnt == 2) {
+                    buf_line_end[px_size + 0] = buf_line_end[0];
+                    buf_line_end[px_size + 1] = buf_line_end[1];
+                    buf_line_end[px_size + 2] = buf_line_end[2];
+                }
+                else if(skip_cnt == 3) {
+                    buf_line_end[px_size + 0] = buf_line_end[0];
+                    buf_line_end[px_size + 1] = buf_line_end[1];
+                    buf_line_end[px_size + 2] = buf_line_end[2];
+                    buf_line_end[px_size * 2 + 0] = buf_line_end[0];
+                    buf_line_end[px_size * 2 + 1] = buf_line_end[1];
+                    buf_line_end[px_size * 2 + 2] = buf_line_end[2];
+                }
+
+                /*Fill the empty lines by duplicating a the finished filled lines to the gaps*/
+                if(skip_cnt > 1 && x + skip_cnt > x_end) {
+                    uint8_t * buf_copy_from = lv_draw_buf_goto_xy(t->target_layer->draw_buf, x_start, y);
+                    lv_memcpy(buf_copy_from + stride_byte, buf_copy_from, line_len_byte);
+                    if(skip_cnt == 3) {
+                        lv_memcpy(buf_copy_from + stride_byte * 2, buf_copy_from, line_len_byte);
+                    }
+                }
+
+                buf_line_end -= next_px_ofs_byte;
+            }
+
+        }
     }
 
     LV_PROFILER_DRAW_END;
@@ -287,6 +366,19 @@ void lv_draw_sw_blur(lv_draw_task_t * t, const lv_draw_blur_dsc_t * dsc, const l
  *   STATIC FUNCTIONS
  **********************/
 
+static void blur_1_bytes_init(uint32_t * sum, uint8_t * buf, uint32_t sample_len, int32_t stride)
+{
+    uint32_t s;
+
+    sum[0] = 0;
+
+    for(s = 0; s < sample_len; s++) {
+        sum[0] += buf[0];
+        buf += stride;
+    }
+    sum[0] = (sum[0] << BLUR_INTENSITY_BITS) / sample_len;
+}
+
 static void blur_3_bytes_init(uint32_t * sum, volatile uint8_t * buf, uint32_t sample_len, int32_t stride)
 {
     uint32_t s;
@@ -328,6 +420,15 @@ static void blur_2_bytes_init(uint32_t * sum, lv_color16_t * buf, uint32_t sampl
     sum[2] = (sum[2] << BLUR_INTENSITY_BITS) / sample_len;
 }
 
+
+static inline uint8_t blur_1_bytes(uint32_t * sum, uint8_t px, uint32_t intensity)
+{
+    uint32_t intensity_inv = BLUR_INTENSITY_MAX - intensity;
+
+    *sum = (((*sum) * intensity) >> BLUR_INTENSITY_BITS) + ((px * intensity_inv));
+    return (*sum) >> BLUR_INTENSITY_BITS;
+}
+
 static inline uint16_t blur_2_bytes(uint32_t * sum, uint16_t px, uint32_t intensity, bool swapped)
 {
     const uint32_t inv = BLUR_INTENSITY_MAX - intensity;

src/misc/lv_style.c

@@ -140,12 +140,17 @@ const uint8_t lv_style_builtin_prop_flag_lookup_table[LV_STYLE_NUM_BUILT_IN_PROP
     [LV_STYLE_RECOLOR] = 0,
     [LV_STYLE_RECOLOR_OPA] = 0,
 
+    [LV_STYLE_DROP_SHADOW_RADIUS] =        LV_STYLE_PROP_FLAG_EXT_DRAW_UPDATE,
+    [LV_STYLE_DROP_SHADOW_OFFSET_X] =      LV_STYLE_PROP_FLAG_EXT_DRAW_UPDATE,
+    [LV_STYLE_DROP_SHADOW_OFFSET_Y] =      LV_STYLE_PROP_FLAG_EXT_DRAW_UPDATE,
+    [LV_STYLE_DROP_SHADOW_OPA] =           LV_STYLE_PROP_FLAG_EXT_DRAW_UPDATE,
+
 #if LV_USE_FLEX
-    [LV_STYLE_FLEX_FLOW] =                    LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
+    [LV_STYLE_FLEX_FLOW] =                 LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
-    [LV_STYLE_FLEX_MAIN_PLACE] =              LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
+    [LV_STYLE_FLEX_MAIN_PLACE] =           LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
-    [LV_STYLE_FLEX_CROSS_PLACE] =             LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
+    [LV_STYLE_FLEX_CROSS_PLACE] =          LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
-    [LV_STYLE_FLEX_TRACK_PLACE] =             LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
+    [LV_STYLE_FLEX_TRACK_PLACE] =          LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
-    [LV_STYLE_FLEX_GROW] =                    LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
+    [LV_STYLE_FLEX_GROW] =                 LV_STYLE_PROP_FLAG_LAYOUT_UPDATE,
 #endif
 
 #if LV_USE_GRID
@@ -429,6 +434,7 @@ lv_style_value_t lv_style_prop_get_default(lv_style_prop_t prop)
         case LV_STYLE_ARC_COLOR:
         case LV_STYLE_LINE_COLOR:
         case LV_STYLE_TEXT_COLOR:
+        case LV_STYLE_DROP_SHADOW_COLOR:
         case LV_STYLE_IMAGE_RECOLOR:
         case LV_STYLE_RECOLOR:
             return (lv_style_value_t) {
@@ -443,9 +449,9 @@ lv_style_value_t lv_style_prop_get_default(lv_style_prop_t prop)
         case LV_STYLE_BG_MAIN_OPA:
         case LV_STYLE_BG_IMAGE_OPA:
         case LV_STYLE_OUTLINE_OPA:
-        case LV_STYLE_SHADOW_OPA:
         case LV_STYLE_LINE_OPA:
         case LV_STYLE_ARC_OPA:
+        case LV_STYLE_SHADOW_OPA:
             return (lv_style_value_t) {
                 .num = LV_OPA_COVER
             };
@@ -470,6 +476,10 @@ lv_style_value_t lv_style_prop_get_default(lv_style_prop_t prop)
             return (lv_style_value_t) {
                 .num = 256
             };
+        case LV_STYLE_DROP_SHADOW_QUALITY:
+            return (lv_style_value_t) {
+                .num = LV_BLUR_QUALITY_PRECISION
+            };
 
 #if LV_USE_GRID
         case LV_STYLE_GRID_CELL_ROW_SPAN:

src/misc/lv_style.h

@@ -149,162 +149,192 @@ typedef union {
 enum _lv_style_id_t {
     LV_STYLE_PROP_INV               = 0,
 
-    /*Group 0*/
+    /*The properties are listed in a special order to make caching more effective.
-    LV_STYLE_WIDTH                  = 1,
+     *Groups are used when LV_OBJ_STYLE_CACHE is enabled.
-    LV_STYLE_HEIGHT                 = 2,
+     *If a property from a groups is set, a bit will be set in
-    LV_STYLE_LENGTH                 = 3,
+     *obj->style_main_prop_is_set and style_other_prop_is_set
+     *to indicate that the property is set.
+     *
+     *Strategy 1: group related properties. E.g. if no "border" properties are set
+     *            they will be skipped quickly.
+     *
+     *Strategy 2: group common property with rarely used properties. This way
+     *            the common property is cached properly and it's rarely affected
+     *            by other props. The other props are cached in an sub-optimal way,
+     *            but they are used rarely.
+     *
+     *Strategy 3: group properties they are used rarely together so that caching doesn't
+     *            interfere
+     *
+     *Each group can have 8 properties. (see STYLE_PROP_SHIFTED)*/
 
-    LV_STYLE_MIN_WIDTH              = 4,
+    /* Size related properties*/
-    LV_STYLE_MAX_WIDTH              = 5,
+    LV_STYLE_WIDTH = 1,
-    LV_STYLE_MIN_HEIGHT             = 6,
+    LV_STYLE_HEIGHT,
-    LV_STYLE_MAX_HEIGHT             = 7,
+    LV_STYLE_LENGTH,
+    LV_STYLE_TRANSFORM_WIDTH,
+    LV_STYLE_TRANSFORM_HEIGHT,
 
-    LV_STYLE_X                      = 8,
+    LV_STYLE_MIN_WIDTH = 8,
-    LV_STYLE_Y                      = 9,
+    LV_STYLE_MAX_WIDTH,
-    LV_STYLE_ALIGN                  = 10,
+    LV_STYLE_MIN_HEIGHT,
+    LV_STYLE_MAX_HEIGHT,
+    LV_STYLE_TRANSLATE_X,
+    LV_STYLE_TRANSLATE_Y,
+    LV_STYLE_RADIAL_OFFSET,
 
-    LV_STYLE_RADIUS                 = 12,
+    /*Position related properties */
-    LV_STYLE_RADIAL_OFFSET          = 13,
+    LV_STYLE_X = 16,
-    LV_STYLE_PAD_RADIAL             = 14,
+    LV_STYLE_Y,
+    LV_STYLE_ALIGN,
 
-    /*Group 1*/
+    /*Padding related properties */
-    LV_STYLE_PAD_TOP                = 16,
+    LV_STYLE_PAD_TOP = 24,
-    LV_STYLE_PAD_BOTTOM             = 17,
+    LV_STYLE_PAD_BOTTOM,
-    LV_STYLE_PAD_LEFT               = 18,
+    LV_STYLE_PAD_LEFT,
-    LV_STYLE_PAD_RIGHT              = 19,
+    LV_STYLE_PAD_RIGHT,
+    LV_STYLE_PAD_RADIAL,
+    LV_STYLE_PAD_ROW,
+    LV_STYLE_PAD_COLUMN,
 
-    LV_STYLE_PAD_ROW                = 20,
+    /*Margin related properties*/
-    LV_STYLE_PAD_COLUMN             = 21,
+    LV_STYLE_MARGIN_TOP = 32,
-    LV_STYLE_LAYOUT                 = 22,
+    LV_STYLE_MARGIN_BOTTOM,
+    LV_STYLE_MARGIN_LEFT,
+    LV_STYLE_MARGIN_RIGHT,
 
-    LV_STYLE_MARGIN_TOP             = 24,
+    /*Bg. Gradient*/
-    LV_STYLE_MARGIN_BOTTOM          = 25,
+    LV_STYLE_BG_GRAD = 40,
-    LV_STYLE_MARGIN_LEFT            = 26,
+    LV_STYLE_BG_GRAD_DIR,
-    LV_STYLE_MARGIN_RIGHT           = 27,
+    LV_STYLE_BG_MAIN_OPA,
+    LV_STYLE_BG_GRAD_OPA,
+    LV_STYLE_BG_GRAD_COLOR,
+    LV_STYLE_BG_MAIN_STOP,
+    LV_STYLE_BG_GRAD_STOP,
 
-    /*Group 2*/
+    /*Bg image*/
-    LV_STYLE_BG_COLOR               = 28,
+    LV_STYLE_BG_IMAGE_SRC = 48,
-    LV_STYLE_BG_OPA                 = 29,
+    LV_STYLE_BG_IMAGE_OPA,
-
+    LV_STYLE_BG_IMAGE_RECOLOR_OPA,
-    LV_STYLE_BG_GRAD_DIR            = 32,
+    LV_STYLE_BG_IMAGE_TILED,
-    LV_STYLE_BG_MAIN_STOP           = 33,
+    LV_STYLE_BG_IMAGE_RECOLOR,
-    LV_STYLE_BG_GRAD_STOP           = 34,
-    LV_STYLE_BG_GRAD_COLOR          = 35,
-
-    LV_STYLE_BG_MAIN_OPA            = 36,
-    LV_STYLE_BG_GRAD_OPA            = 37,
-    LV_STYLE_BG_GRAD                = 38,
-    LV_STYLE_BASE_DIR               = 39,
-
-    LV_STYLE_BG_IMAGE_SRC             = 40,
-    LV_STYLE_BG_IMAGE_OPA             = 41,
-    LV_STYLE_BG_IMAGE_RECOLOR         = 42,
-    LV_STYLE_BG_IMAGE_RECOLOR_OPA     = 43,
-
-    LV_STYLE_BG_IMAGE_TILED           = 44,
-    LV_STYLE_CLIP_CORNER            = 45,
 
     /*Group 3*/
-    LV_STYLE_BORDER_WIDTH           = 48,
+    LV_STYLE_BORDER_WIDTH = 56,
-    LV_STYLE_BORDER_COLOR           = 49,
+    LV_STYLE_BORDER_COLOR,
-    LV_STYLE_BORDER_OPA             = 50,
+    LV_STYLE_BORDER_OPA,
+    LV_STYLE_BORDER_POST,
+    LV_STYLE_BORDER_SIDE,
 
-    LV_STYLE_BORDER_SIDE            = 52,
+    /*Outline */
-    LV_STYLE_BORDER_POST            = 53,
+    LV_STYLE_OUTLINE_WIDTH = 64,
+    LV_STYLE_OUTLINE_COLOR,
+    LV_STYLE_OUTLINE_OPA,
+    LV_STYLE_OUTLINE_PAD,
 
-    LV_STYLE_OUTLINE_WIDTH          = 56,
+    /*Image, Shadow, Line, Arc, and Text are rarely used together.*/
-    LV_STYLE_OUTLINE_COLOR          = 57,
+    LV_STYLE_BG_OPA = 72,
-    LV_STYLE_OUTLINE_OPA            = 58,
+    LV_STYLE_BG_COLOR,
-    LV_STYLE_OUTLINE_PAD            = 59,
+    LV_STYLE_SHADOW_WIDTH,
+    LV_STYLE_LINE_WIDTH,
+    LV_STYLE_ARC_WIDTH,
+    LV_STYLE_TEXT_FONT,
+    LV_STYLE_IMAGE_RECOLOR_OPA,
 
-    /*Group 4*/
+    LV_STYLE_IMAGE_OPA = 80,
-    LV_STYLE_SHADOW_WIDTH           = 60,
+    LV_STYLE_SHADOW_OPA,
-    LV_STYLE_SHADOW_COLOR           = 61,
+    LV_STYLE_LINE_OPA,
-    LV_STYLE_SHADOW_OPA             = 62,
+    LV_STYLE_ARC_OPA,
+    LV_STYLE_TEXT_OPA,
 
-    LV_STYLE_SHADOW_OFFSET_X        = 64,
+    LV_STYLE_SHADOW_COLOR = 88,
-    LV_STYLE_SHADOW_OFFSET_Y        = 65,
+    LV_STYLE_IMAGE_RECOLOR,
-    LV_STYLE_SHADOW_SPREAD          = 66,
+    LV_STYLE_LINE_COLOR,
+    LV_STYLE_ARC_COLOR,
+    LV_STYLE_TEXT_COLOR,
 
-    LV_STYLE_IMAGE_OPA                = 68,
+    LV_STYLE_ARC_IMAGE_SRC = 96,
-    LV_STYLE_IMAGE_RECOLOR            = 69,
+    LV_STYLE_SHADOW_OFFSET_X,
-    LV_STYLE_IMAGE_RECOLOR_OPA        = 70,
+    LV_STYLE_SHADOW_OFFSET_Y,
+    LV_STYLE_SHADOW_SPREAD,
+    LV_STYLE_LINE_DASH_WIDTH,
+    LV_STYLE_TEXT_ALIGN,
+    LV_STYLE_TEXT_LETTER_SPACE,
+    LV_STYLE_TEXT_LINE_SPACE,
 
-    LV_STYLE_LINE_WIDTH             = 72,
+    LV_STYLE_LINE_DASH_GAP = 104,
-    LV_STYLE_LINE_DASH_WIDTH        = 73,
+    LV_STYLE_LINE_ROUNDED,
-    LV_STYLE_LINE_DASH_GAP          = 74,
+    LV_STYLE_IMAGE_COLORKEY,
-    LV_STYLE_LINE_ROUNDED           = 75,
+    LV_STYLE_TEXT_OUTLINE_STROKE_WIDTH,
-    LV_STYLE_LINE_COLOR             = 76,
+    LV_STYLE_TEXT_OUTLINE_STROKE_OPA,
-    LV_STYLE_LINE_OPA               = 77,
+    LV_STYLE_TEXT_OUTLINE_STROKE_COLOR,
+    LV_STYLE_TEXT_DECOR,
+    LV_STYLE_ARC_ROUNDED,
 
-    /*Group 5*/
+    /*Group unrelated props*/
-    LV_STYLE_ARC_WIDTH              = 80,
+    LV_STYLE_OPA = 112,
-    LV_STYLE_ARC_ROUNDED            = 81,
+    LV_STYLE_OPA_LAYERED,
-    LV_STYLE_ARC_COLOR              = 82,
+    LV_STYLE_COLOR_FILTER_DSC,
-    LV_STYLE_ARC_OPA                = 83,
+    LV_STYLE_COLOR_FILTER_OPA,
-    LV_STYLE_ARC_IMAGE_SRC            = 84,
+    LV_STYLE_ANIM,
+    LV_STYLE_ANIM_DURATION,
+    LV_STYLE_TRANSITION,
 
-    LV_STYLE_TEXT_COLOR             = 88,
+    /*Radius is requested a lot, group it with rarely requested ones*/
-    LV_STYLE_TEXT_OPA               = 89,
+    LV_STYLE_RADIUS = 120,
-    LV_STYLE_TEXT_FONT              = 90,
+    LV_STYLE_BITMAP_MASK_SRC,
+    LV_STYLE_BLEND_MODE,
+    LV_STYLE_ROTARY_SENSITIVITY,
+    LV_STYLE_TRANSLATE_RADIAL,
 
-    LV_STYLE_TEXT_LETTER_SPACE      = 91,
+    /*Requested a lot but rarely used*/
-    LV_STYLE_TEXT_LINE_SPACE        = 92,
+    LV_STYLE_CLIP_CORNER = 128,
-    LV_STYLE_TEXT_DECOR             = 93,
+    LV_STYLE_BASE_DIR,
-    LV_STYLE_TEXT_ALIGN             = 94,
+    LV_STYLE_RECOLOR,
-    LV_STYLE_TEXT_OUTLINE_STROKE_WIDTH = 95,
+    LV_STYLE_RECOLOR_OPA,
-    LV_STYLE_TEXT_OUTLINE_STROKE_OPA   = 96,
+    LV_STYLE_LAYOUT,
-    LV_STYLE_TEXT_OUTLINE_STROKE_COLOR = 97,
 
-    LV_STYLE_OPA                    = 98,
+    /*Blur*/
-    LV_STYLE_OPA_LAYERED            = 99,
+    LV_STYLE_BLUR_RADIUS = 136,
-    LV_STYLE_COLOR_FILTER_DSC       = 100,
+    LV_STYLE_BLUR_BACKDROP,
-    LV_STYLE_COLOR_FILTER_OPA       = 101,
+    LV_STYLE_BLUR_QUALITY,
-    LV_STYLE_ANIM                   = 102,
-    LV_STYLE_ANIM_DURATION          = 103,
-    LV_STYLE_TRANSITION             = 104,
-    LV_STYLE_BLEND_MODE             = 105,
-    LV_STYLE_TRANSFORM_WIDTH        = 106,
-    LV_STYLE_TRANSFORM_HEIGHT       = 107,
-    LV_STYLE_TRANSLATE_X            = 108,
-    LV_STYLE_TRANSLATE_Y            = 109,
-    LV_STYLE_TRANSFORM_SCALE_X      = 110,
-    LV_STYLE_TRANSFORM_SCALE_Y      = 111,
-    LV_STYLE_TRANSFORM_ROTATION     = 112,
-    LV_STYLE_TRANSFORM_PIVOT_X      = 113,
-    LV_STYLE_TRANSFORM_PIVOT_Y      = 114,
-    LV_STYLE_TRANSFORM_SKEW_X       = 115,
-    LV_STYLE_TRANSFORM_SKEW_Y       = 116,
-    LV_STYLE_BITMAP_MASK_SRC        = 117,
-    LV_STYLE_ROTARY_SENSITIVITY     = 118,
-    LV_STYLE_TRANSLATE_RADIAL       = 119,
-    LV_STYLE_RECOLOR                = 120,
-    LV_STYLE_RECOLOR_OPA            = 121,
 
-    LV_STYLE_FLEX_FLOW              = 122,
+    /*Drop shadow*/
-    LV_STYLE_FLEX_MAIN_PLACE        = 123,
+    LV_STYLE_DROP_SHADOW_RADIUS = 144,
-    LV_STYLE_FLEX_CROSS_PLACE       = 124,
+    LV_STYLE_DROP_SHADOW_OFFSET_X,
-    LV_STYLE_FLEX_TRACK_PLACE       = 125,
+    LV_STYLE_DROP_SHADOW_OFFSET_Y,
-    LV_STYLE_FLEX_GROW              = 126,
+    LV_STYLE_DROP_SHADOW_COLOR,
+    LV_STYLE_DROP_SHADOW_OPA,
+    LV_STYLE_DROP_SHADOW_QUALITY,
 
-    LV_STYLE_GRID_COLUMN_ALIGN      = 127,
+    /*Scale and transform*/
-    LV_STYLE_GRID_ROW_ALIGN         = 128,
+    LV_STYLE_TRANSFORM_SCALE_X = 152,
-    LV_STYLE_GRID_ROW_DSC_ARRAY     = 129,
+    LV_STYLE_TRANSFORM_SCALE_Y,
-    LV_STYLE_GRID_COLUMN_DSC_ARRAY  = 130,
+    LV_STYLE_TRANSFORM_PIVOT_X,
-    LV_STYLE_GRID_CELL_COLUMN_POS   = 131,
+    LV_STYLE_TRANSFORM_PIVOT_Y,
-    LV_STYLE_GRID_CELL_COLUMN_SPAN  = 132,
+    LV_STYLE_TRANSFORM_ROTATION,
-    LV_STYLE_GRID_CELL_X_ALIGN      = 133,
+    LV_STYLE_TRANSFORM_SKEW_X,
-    LV_STYLE_GRID_CELL_ROW_POS      = 134,
+    LV_STYLE_TRANSFORM_SKEW_Y,
-    LV_STYLE_GRID_CELL_ROW_SPAN     = 135,
-    LV_STYLE_GRID_CELL_Y_ALIGN      = 136,
-    LV_STYLE_IMAGE_COLORKEY         = 137,
 
-    LV_STYLE_BLUR_RADIUS            = 138,
+    /*Flex and basic grid (rarely used together)*/
-    LV_STYLE_BLUR_BACKDROP          = 139,
+    LV_STYLE_FLEX_FLOW = 160,
-    LV_STYLE_BLUR_QUALITY           = 140,
+    LV_STYLE_FLEX_MAIN_PLACE,
+    LV_STYLE_FLEX_CROSS_PLACE,
+    LV_STYLE_FLEX_TRACK_PLACE,
+    LV_STYLE_FLEX_GROW,
+    LV_STYLE_GRID_COLUMN_DSC_ARRAY,
+    LV_STYLE_GRID_ROW_DSC_ARRAY,
+
+    LV_STYLE_GRID_COLUMN_ALIGN = 168,
+    LV_STYLE_GRID_ROW_ALIGN,
+    LV_STYLE_GRID_CELL_COLUMN_POS,
+    LV_STYLE_GRID_CELL_COLUMN_SPAN,
+    LV_STYLE_GRID_CELL_X_ALIGN,
+    LV_STYLE_GRID_CELL_ROW_POS,
+    LV_STYLE_GRID_CELL_ROW_SPAN,
+    LV_STYLE_GRID_CELL_Y_ALIGN,
 
     LV_STYLE_LAST_BUILT_IN_PROP,
-
     LV_STYLE_NUM_BUILT_IN_PROPS     = LV_STYLE_LAST_BUILT_IN_PROP + 1,
 
     LV_STYLE_PROP_ANY                = 0xFF,

src/misc/lv_style_gen.c

@@ -706,6 +706,78 @@ void lv_style_set_text_outline_stroke_opa(lv_style_t * style, lv_opa_t value)
     lv_style_set_prop(style, LV_STYLE_TEXT_OUTLINE_STROKE_OPA, v);
 }
 
+void lv_style_set_blur_radius(lv_style_t * style, int32_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_BLUR_RADIUS, v);
+}
+
+void lv_style_set_blur_backdrop(lv_style_t * style, bool value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_BLUR_BACKDROP, v);
+}
+
+void lv_style_set_blur_quality(lv_style_t * style, lv_blur_quality_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_BLUR_QUALITY, v);
+}
+
+void lv_style_set_drop_shadow_radius(lv_style_t * style, int32_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_DROP_SHADOW_RADIUS, v);
+}
+
+void lv_style_set_drop_shadow_offset_x(lv_style_t * style, int32_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_DROP_SHADOW_OFFSET_X, v);
+}
+
+void lv_style_set_drop_shadow_offset_y(lv_style_t * style, int32_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_DROP_SHADOW_OFFSET_Y, v);
+}
+
+void lv_style_set_drop_shadow_color(lv_style_t * style, lv_color_t value)
+{
+    lv_style_value_t v = {
+        .color = value
+    };
+    lv_style_set_prop(style, LV_STYLE_DROP_SHADOW_COLOR, v);
+}
+
+void lv_style_set_drop_shadow_opa(lv_style_t * style, lv_opa_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_DROP_SHADOW_OPA, v);
+}
+
+void lv_style_set_drop_shadow_quality(lv_style_t * style, lv_blur_quality_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_DROP_SHADOW_QUALITY, v);
+}
+
 void lv_style_set_radius(lv_style_t * style, int32_t value)
 {
     lv_style_value_t v = {
@@ -778,30 +850,6 @@ void lv_style_set_recolor_opa(lv_style_t * style, lv_opa_t value)
     lv_style_set_prop(style, LV_STYLE_RECOLOR_OPA, v);
 }
 
-void lv_style_set_blur_radius(lv_style_t * style, int32_t value)
-{
-    lv_style_value_t v = {
-        .num = (int32_t)value
-    };
-    lv_style_set_prop(style, LV_STYLE_BLUR_RADIUS, v);
-}
-
-void lv_style_set_blur_backdrop(lv_style_t * style, bool value)
-{
-    lv_style_value_t v = {
-        .num = (int32_t)value
-    };
-    lv_style_set_prop(style, LV_STYLE_BLUR_BACKDROP, v);
-}
-
-void lv_style_set_blur_quality(lv_style_t * style, lv_blur_quality_t value)
-{
-    lv_style_value_t v = {
-        .num = (int32_t)value
-    };
-    lv_style_set_prop(style, LV_STYLE_BLUR_QUALITY, v);
-}
-
 void lv_style_set_anim(lv_style_t * style, const lv_anim_t * value)
 {
     lv_style_value_t v = {

src/misc/lv_style_gen.h

@@ -101,6 +101,15 @@ void lv_style_set_text_align(lv_style_t * style, lv_text_align_t value);
 void lv_style_set_text_outline_stroke_color(lv_style_t * style, lv_color_t value);
 void lv_style_set_text_outline_stroke_width(lv_style_t * style, int32_t value);
 void lv_style_set_text_outline_stroke_opa(lv_style_t * style, lv_opa_t value);
+void lv_style_set_blur_radius(lv_style_t * style, int32_t value);
+void lv_style_set_blur_backdrop(lv_style_t * style, bool value);
+void lv_style_set_blur_quality(lv_style_t * style, lv_blur_quality_t value);
+void lv_style_set_drop_shadow_radius(lv_style_t * style, int32_t value);
+void lv_style_set_drop_shadow_offset_x(lv_style_t * style, int32_t value);
+void lv_style_set_drop_shadow_offset_y(lv_style_t * style, int32_t value);
+void lv_style_set_drop_shadow_color(lv_style_t * style, lv_color_t value);
+void lv_style_set_drop_shadow_opa(lv_style_t * style, lv_opa_t value);
+void lv_style_set_drop_shadow_quality(lv_style_t * style, lv_blur_quality_t value);
 void lv_style_set_radius(lv_style_t * style, int32_t value);
 void lv_style_set_radial_offset(lv_style_t * style, int32_t value);
 void lv_style_set_clip_corner(lv_style_t * style, bool value);
@@ -110,9 +119,6 @@ void lv_style_set_color_filter_dsc(lv_style_t * style, const lv_color_filter_dsc
 void lv_style_set_color_filter_opa(lv_style_t * style, lv_opa_t value);
 void lv_style_set_recolor(lv_style_t * style, lv_color_t value);
 void lv_style_set_recolor_opa(lv_style_t * style, lv_opa_t value);
-void lv_style_set_blur_radius(lv_style_t * style, int32_t value);
-void lv_style_set_blur_backdrop(lv_style_t * style, bool value);
-void lv_style_set_blur_quality(lv_style_t * style, lv_blur_quality_t value);
 void lv_style_set_anim(lv_style_t * style, const lv_anim_t * value);
 void lv_style_set_anim_duration(lv_style_t * style, uint32_t value);
 void lv_style_set_transition(lv_style_t * style, const lv_style_transition_dsc_t * value);
@@ -578,6 +584,51 @@ void lv_style_set_grid_cell_row_span(lv_style_t * style, int32_t value);
         .prop = LV_STYLE_TEXT_OUTLINE_STROKE_OPA, .value = { .num = (int32_t)val } \
     }
 
+#define LV_STYLE_CONST_BLUR_RADIUS(val) \
+    { \
+        .prop = LV_STYLE_BLUR_RADIUS, .value = { .num = (int32_t)val } \
+    }
+
+#define LV_STYLE_CONST_BLUR_BACKDROP(val) \
+    { \
+        .prop = LV_STYLE_BLUR_BACKDROP, .value = { .num = (int32_t)val } \
+    }
+
+#define LV_STYLE_CONST_BLUR_QUALITY(val) \
+    { \
+        .prop = LV_STYLE_BLUR_QUALITY, .value = { .num = (int32_t)val } \
+    }
+
+#define LV_STYLE_CONST_DROP_SHADOW_RADIUS(val) \
+    { \
+        .prop = LV_STYLE_DROP_SHADOW_RADIUS, .value = { .num = (int32_t)val } \
+    }
+
+#define LV_STYLE_CONST_DROP_SHADOW_OFFSET_X(val) \
+    { \
+        .prop = LV_STYLE_DROP_SHADOW_OFFSET_X, .value = { .num = (int32_t)val } \
+    }
+
+#define LV_STYLE_CONST_DROP_SHADOW_OFFSET_Y(val) \
+    { \
+        .prop = LV_STYLE_DROP_SHADOW_OFFSET_Y, .value = { .num = (int32_t)val } \
+    }
+
+#define LV_STYLE_CONST_DROP_SHADOW_COLOR(val) \
+    { \
+        .prop = LV_STYLE_DROP_SHADOW_COLOR, .value = { .color = val } \
+    }
+
+#define LV_STYLE_CONST_DROP_SHADOW_OPA(val) \
+    { \
+        .prop = LV_STYLE_DROP_SHADOW_OPA, .value = { .num = (int32_t)val } \
+    }
+
+#define LV_STYLE_CONST_DROP_SHADOW_QUALITY(val) \
+    { \
+        .prop = LV_STYLE_DROP_SHADOW_QUALITY, .value = { .num = (int32_t)val } \
+    }
+
 #define LV_STYLE_CONST_RADIUS(val) \
     { \
         .prop = LV_STYLE_RADIUS, .value = { .num = (int32_t)val } \
@@ -623,21 +674,6 @@ void lv_style_set_grid_cell_row_span(lv_style_t * style, int32_t value);
         .prop = LV_STYLE_RECOLOR_OPA, .value = { .num = (int32_t)val } \
     }
 
-#define LV_STYLE_CONST_BLUR_RADIUS(val) \
-    { \
-        .prop = LV_STYLE_BLUR_RADIUS, .value = { .num = (int32_t)val } \
-    }
-
-#define LV_STYLE_CONST_BLUR_BACKDROP(val) \
-    { \
-        .prop = LV_STYLE_BLUR_BACKDROP, .value = { .num = (int32_t)val } \
-    }
-
-#define LV_STYLE_CONST_BLUR_QUALITY(val) \
-    { \
-        .prop = LV_STYLE_BLUR_QUALITY, .value = { .num = (int32_t)val } \
-    }
-
 #define LV_STYLE_CONST_ANIM(val) \
     { \
         .prop = LV_STYLE_ANIM, .value = { .ptr = val } \

src/widgets/arc/lv_arc.c

@@ -804,6 +804,8 @@ static void lv_arc_event(const lv_obj_class_t * class_p, lv_event_t * e)
 
         int32_t * s = lv_event_get_param(e);
         *s = LV_MAX(*s, knob_extra_size);
+        *s = LV_MAX(*s, lv_obj_calculate_ext_draw_size(obj, LV_PART_INDICATOR));
+
     }
     else if(code == LV_EVENT_DRAW_MAIN) {
         lv_arc_draw(e);

src/widgets/chart/lv_chart.c

@@ -1061,6 +1061,7 @@ static void draw_series_line(lv_obj_t * obj, lv_layer_t * layer)
             continue;
         }
         line_dsc.color = ser->color;
+        line_dsc.base.drop_shadow_color = ser->color;
         point_dsc_default.bg_color = ser->color;
         line_dsc.base.id2 = 0;
         point_dsc_default.base.id2 = 0;

src/widgets/label/lv_label.c

@@ -927,6 +927,8 @@ static void draw_main(lv_event_t * e)
         lv_area_move(&txt_coords, 0, -s);
         txt_coords.y2 = obj->coords.y2;
     }
+
+    /*Clip to the text in some cases to avoid ugly overflows*/
     if(label->long_mode == LV_LABEL_LONG_MODE_SCROLL ||
        label->long_mode == LV_LABEL_LONG_MODE_SCROLL_CIRCULAR ||
        label->long_mode == LV_LABEL_LONG_MODE_CLIP) {
@@ -935,10 +937,14 @@ static void draw_main(lv_event_t * e)
         lv_draw_label(layer, &label_draw_dsc, &txt_coords);
         layer->_clip_area = clip_area_ori;
     }
+    /*Do not clip to make the drop shadow  visible*/
+    else if(label_draw_dsc.base.drop_shadow_opa > 0) {
+        lv_draw_label(layer, &label_draw_dsc, &txt_coords);
+    }
+    /*Labels have some extra draw area by default to not clip characters with
+     *italic, handwritten and other less standard fonts.
+     *However, with most of the fonts typically it's safe to clip at least to bottom side*/
     else {
-        /*Labels have some extra draw area by default to not clip characters with
-         *italic, handwritten and other less standard fonts.
-         *However, with most of the fonts typically it's safe to clip at least to bottom side*/
         const lv_area_t clip_area_ori = layer->_clip_area;
         layer->_clip_area.y2 = txt_clip.y2;
         lv_draw_label(layer, &label_draw_dsc, &txt_coords);

src/widgets/property/lv_obj_property_names.h

@@ -30,7 +30,7 @@
     extern const lv_property_name_t lv_span_property_names[5];
     extern const lv_property_name_t lv_spinbox_property_names[8];
     extern const lv_property_name_t lv_spinner_property_names[2];
-    extern const lv_property_name_t lv_style_property_names[123];
+    extern const lv_property_name_t lv_style_property_names[130];
     extern const lv_property_name_t lv_switch_property_names[1];
     extern const lv_property_name_t lv_table_property_names[2];
     extern const lv_property_name_t lv_tabview_property_names[2];

src/widgets/property/lv_style_properties.c

@@ -14,7 +14,7 @@
  * Generated code from properties.py
  */
 /* *INDENT-OFF* */
-const lv_property_name_t lv_style_property_names[123] = {
+const lv_property_name_t lv_style_property_names[130] = {
     {"align",                  LV_PROPERTY_STYLE_ALIGN,},
     {"anim",                   LV_PROPERTY_STYLE_ANIM,},
     {"anim_duration",          LV_PROPERTY_STYLE_ANIM_DURATION,},
@@ -51,6 +51,12 @@ const lv_property_name_t lv_style_property_names[123] = {
     {"clip_corner",            LV_PROPERTY_STYLE_CLIP_CORNER,},
     {"color_filter_dsc",       LV_PROPERTY_STYLE_COLOR_FILTER_DSC,},
     {"color_filter_opa",       LV_PROPERTY_STYLE_COLOR_FILTER_OPA,},
+    {"drop_shadow_color",      LV_PROPERTY_STYLE_DROP_SHADOW_COLOR,},
+    {"drop_shadow_offset_x",   LV_PROPERTY_STYLE_DROP_SHADOW_OFFSET_X,},
+    {"drop_shadow_offset_y",   LV_PROPERTY_STYLE_DROP_SHADOW_OFFSET_Y,},
+    {"drop_shadow_opa",        LV_PROPERTY_STYLE_DROP_SHADOW_OPA,},
+    {"drop_shadow_quality",    LV_PROPERTY_STYLE_DROP_SHADOW_QUALITY,},
+    {"drop_shadow_radius",     LV_PROPERTY_STYLE_DROP_SHADOW_RADIUS,},
     {"flex_cross_place",       LV_PROPERTY_STYLE_FLEX_CROSS_PLACE,},
     {"flex_flow",              LV_PROPERTY_STYLE_FLEX_FLOW,},
     {"flex_grow",              LV_PROPERTY_STYLE_FLEX_GROW,},
@@ -71,6 +77,7 @@ const lv_property_name_t lv_style_property_names[123] = {
     {"image_opa",              LV_PROPERTY_STYLE_IMAGE_OPA,},
     {"image_recolor",          LV_PROPERTY_STYLE_IMAGE_RECOLOR,},
     {"image_recolor_opa",      LV_PROPERTY_STYLE_IMAGE_RECOLOR_OPA,},
+    {"last_built_in_prop",     LV_PROPERTY_STYLE_LAST_BUILT_IN_PROP,},
     {"layout",                 LV_PROPERTY_STYLE_LAYOUT,},
     {"length",                 LV_PROPERTY_STYLE_LENGTH,},
     {"line_color",             LV_PROPERTY_STYLE_LINE_COLOR,},

src/widgets/property/lv_style_properties.h

@@ -48,6 +48,12 @@ enum _lv_property_style_id_t {
     LV_PROPERTY_ID(STYLE, CLIP_CORNER,              LV_PROPERTY_TYPE_INT,        LV_STYLE_CLIP_CORNER),
     LV_PROPERTY_ID(STYLE, COLOR_FILTER_DSC,         LV_PROPERTY_TYPE_POINTER,    LV_STYLE_COLOR_FILTER_DSC),
     LV_PROPERTY_ID(STYLE, COLOR_FILTER_OPA,         LV_PROPERTY_TYPE_INT,        LV_STYLE_COLOR_FILTER_OPA),
+    LV_PROPERTY_ID(STYLE, DROP_SHADOW_COLOR,        LV_PROPERTY_TYPE_COLOR,      LV_STYLE_DROP_SHADOW_COLOR),
+    LV_PROPERTY_ID(STYLE, DROP_SHADOW_OFFSET_X,     LV_PROPERTY_TYPE_INT,        LV_STYLE_DROP_SHADOW_OFFSET_X),
+    LV_PROPERTY_ID(STYLE, DROP_SHADOW_OFFSET_Y,     LV_PROPERTY_TYPE_INT,        LV_STYLE_DROP_SHADOW_OFFSET_Y),
+    LV_PROPERTY_ID(STYLE, DROP_SHADOW_OPA,          LV_PROPERTY_TYPE_INT,        LV_STYLE_DROP_SHADOW_OPA),
+    LV_PROPERTY_ID(STYLE, DROP_SHADOW_QUALITY,      LV_PROPERTY_TYPE_INT,        LV_STYLE_DROP_SHADOW_QUALITY),
+    LV_PROPERTY_ID(STYLE, DROP_SHADOW_RADIUS,       LV_PROPERTY_TYPE_INT,        LV_STYLE_DROP_SHADOW_RADIUS),
     LV_PROPERTY_ID(STYLE, FLEX_CROSS_PLACE,         LV_PROPERTY_TYPE_INT,        LV_STYLE_FLEX_CROSS_PLACE),
     LV_PROPERTY_ID(STYLE, FLEX_FLOW,                LV_PROPERTY_TYPE_INT,        LV_STYLE_FLEX_FLOW),
     LV_PROPERTY_ID(STYLE, FLEX_GROW,                LV_PROPERTY_TYPE_INT,        LV_STYLE_FLEX_GROW),
@@ -68,6 +74,7 @@ enum _lv_property_style_id_t {
     LV_PROPERTY_ID(STYLE, IMAGE_OPA,                LV_PROPERTY_TYPE_INT,        LV_STYLE_IMAGE_OPA),
     LV_PROPERTY_ID(STYLE, IMAGE_RECOLOR,            LV_PROPERTY_TYPE_COLOR,      LV_STYLE_IMAGE_RECOLOR),
     LV_PROPERTY_ID(STYLE, IMAGE_RECOLOR_OPA,        LV_PROPERTY_TYPE_INT,        LV_STYLE_IMAGE_RECOLOR_OPA),
+    LV_PROPERTY_ID(STYLE, LAST_BUILT_IN_PROP,       LV_PROPERTY_TYPE_INVALID,    LV_STYLE_LAST_BUILT_IN_PROP),
     LV_PROPERTY_ID(STYLE, LAYOUT,                   LV_PROPERTY_TYPE_INT,        LV_STYLE_LAYOUT),
     LV_PROPERTY_ID(STYLE, LENGTH,                   LV_PROPERTY_TYPE_INT,        LV_STYLE_LENGTH),
     LV_PROPERTY_ID(STYLE, LINE_COLOR,               LV_PROPERTY_TYPE_COLOR,      LV_STYLE_LINE_COLOR),