diff --git a/examples/widgets/lv_example_widgets.h b/examples/widgets/lv_example_widgets.h
index 08fb72195..526a23bbf 100644
--- a/examples/widgets/lv_example_widgets.h
+++ b/examples/widgets/lv_example_widgets.h
@@ -95,6 +95,7 @@ void lv_example_obj_2(void);
 
 void lv_example_roller_1(void);
 void lv_example_roller_2(void);
+void lv_example_roller_3(void);
 
 void lv_example_slider_1(void);
 void lv_example_slider_2(void);
diff --git a/examples/widgets/roller/index.rst b/examples/widgets/roller/index.rst
index 3aeac4dbc..791de9c3f 100644
--- a/examples/widgets/roller/index.rst
+++ b/examples/widgets/roller/index.rst
@@ -13,6 +13,12 @@ Styling the roller
 .. lv_example:: widgets/roller/lv_example_roller_2
   :language: c
 
+add fade mask to roller
+"""""""""""""""""""""""
+
+.. lv_example:: widgets/roller/lv_example_roller_3
+  :language: c
+
 MicroPython
 ^^^^^^^^^^^
 
diff --git a/examples/widgets/roller/lv_example_roller_3.c b/examples/widgets/roller/lv_example_roller_3.c
new file mode 100644
index 000000000..3717a2d6a
--- /dev/null
+++ b/examples/widgets/roller/lv_example_roller_3.c
@@ -0,0 +1,88 @@
+#include "../../lv_examples.h"
+#if LV_USE_ROLLER && LV_DRAW_COMPLEX && LV_BUILD_EXAMPLES
+
+static void mask_event_cb(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_target(e);
+
+    if (code == LV_EVENT_COVER_CHECK) {
+        lv_event_set_cover_res(e, LV_COVER_RES_MASKED);
+
+    } else if (code == LV_EVENT_DRAW_MAIN_BEGIN) {
+        /* add mask */
+        const lv_font_t * font = lv_obj_get_style_text_font(obj, LV_PART_MAIN);
+        lv_coord_t line_space = lv_obj_get_style_text_line_space(obj, LV_PART_MAIN);
+        lv_coord_t font_h = lv_font_get_line_height(font);
+
+        lv_area_t roller_coords;
+        lv_obj_get_coords(obj, &roller_coords);
+
+        lv_area_t rect_area;
+        rect_area.x1 = roller_coords.x1;
+        rect_area.x2 = roller_coords.x2;
+        rect_area.y1 = roller_coords.y1;
+        rect_area.y2 = roller_coords.y1 + (lv_obj_get_height(obj) - font_h - line_space) / 2;
+
+        lv_draw_mask_fade_param_t * fade_mask_top = (lv_draw_mask_fade_param_t*)lv_mem_buf_get(sizeof(lv_draw_mask_fade_param_t));
+        lv_draw_mask_fade_init(fade_mask_top, &rect_area, LV_OPA_TRANSP, rect_area.y1, LV_OPA_COVER, rect_area.y2);
+        lv_draw_mask_add(fade_mask_top, obj);
+
+        rect_area.y1 = rect_area.y2 + font_h + line_space - 1;
+        rect_area.y2 = roller_coords.y2;
+
+        lv_draw_mask_fade_param_t * fade_mask_bottom = (lv_draw_mask_fade_param_t*)lv_mem_buf_get(sizeof(lv_draw_mask_fade_param_t));
+        lv_draw_mask_fade_init(fade_mask_bottom, &rect_area, LV_OPA_COVER, rect_area.y1, LV_OPA_TRANSP, rect_area.y2);
+        lv_draw_mask_add(fade_mask_bottom, obj + 1);
+
+    } else if (code == LV_EVENT_DRAW_POST_END) {
+        lv_draw_mask_fade_param_t * fade_mask_top = (lv_draw_mask_fade_param_t*)lv_draw_mask_remove_custom(obj);
+        lv_draw_mask_fade_param_t * fade_mask_bottom = (lv_draw_mask_fade_param_t*)lv_draw_mask_remove_custom(obj + 1);
+        lv_draw_mask_remove_custom(fade_mask_top);
+        lv_draw_mask_remove_custom(fade_mask_bottom);
+    }
+}
+
+/**
+ * Add an fade mask to roller.
+ */
+void lv_example_roller_3(void)
+{
+    static lv_style_t style;
+    lv_style_init(&style);
+    lv_style_set_bg_color(&style, lv_color_black());
+    lv_style_set_text_color(&style, lv_color_white());
+
+    lv_obj_add_style(lv_scr_act(), &style, 0);
+
+    lv_obj_t *roller1 = lv_roller_create(lv_scr_act());
+    lv_obj_add_style(roller1, &style, 0);
+    lv_obj_set_style_border_width(roller1, 0, 0);
+    lv_obj_set_style_pad_all(roller1, 0, 0);
+    lv_obj_set_style_bg_opa(roller1, LV_OPA_TRANSP, LV_PART_SELECTED);
+
+#if LV_FONT_MONTSERRAT_22
+    lv_obj_set_style_text_font(roller1, &lv_font_montserrat_22, LV_PART_SELECTED);
+#endif
+
+    lv_roller_set_options(roller1,
+                        "January\n"
+                        "February\n"
+                        "March\n"
+                        "April\n"
+                        "May\n"
+                        "June\n"
+                        "July\n"
+                        "August\n"
+                        "September\n"
+                        "October\n"
+                        "November\n"
+                        "December",
+                        LV_ROLLER_MODE_NORMAL);
+
+    lv_obj_center(roller1);
+    lv_roller_set_visible_row_count(roller1, 3);
+    lv_obj_add_event_cb(roller1, mask_event_cb, LV_EVENT_ALL, NULL);
+}
+
+#endif