diff --git a/examples/widgets/lv_example_widgets.h b/examples/widgets/lv_example_widgets.h
index b778134f16..e397b637fb 100644
--- a/examples/widgets/lv_example_widgets.h
+++ b/examples/widgets/lv_example_widgets.h
@@ -114,7 +114,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_roller_3(void);
 
 void lv_example_scale_1(void);
 void lv_example_scale_2(void);
diff --git a/examples/widgets/roller/lv_example_roller_3.c b/examples/widgets/roller/lv_example_roller_3.c
index 4561c15262..e4c50bc27c 100644
--- a/examples/widgets/roller/lv_example_roller_3.c
+++ b/examples/widgets/roller/lv_example_roller_3.c
@@ -1,56 +1,38 @@
 #include "../../lv_examples.h"
-//TODO
-#if LV_USE_ROLLER && LV_DRAW_SW_COMPLEX && LV_BUILD_EXAMPLES && 0
 
-static void mask_event_cb(lv_event_t * e)
+#if LV_USE_ROLLER && LV_DRAW_SW_COMPLEX && LV_BUILD_EXAMPLES && 1
+
+static void generate_mask(lv_draw_buf_t * mask)
 {
-    lv_event_code_t code = lv_event_get_code(e);
-    lv_obj_t * obj = lv_event_get_target(e);
+    /*Create a "8 bit alpha" canvas and clear it*/
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, mask);
+    lv_canvas_fill_bg(canvas, lv_color_white(), LV_OPA_TRANSP);
 
-    static int16_t mask_top_id = -1;
-    static int16_t mask_bottom_id = -1;
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
 
-    if(code == LV_EVENT_COVER_CHECK) {
-        lv_event_set_cover_res(e, LV_COVER_RES_MASKED);
+    /*Draw a label to the canvas. The result "image" will be used as mask*/
+    lv_draw_rect_dsc_t rect_dsc;
+    lv_draw_rect_dsc_init(&rect_dsc);
+    rect_dsc.bg_grad.dir = LV_GRAD_DIR_VER;
+    rect_dsc.bg_grad.stops[0].color = lv_color_black();
+    rect_dsc.bg_grad.stops[1].color = lv_color_white();
+    rect_dsc.bg_grad.stops[0].opa = LV_OPA_COVER;
+    rect_dsc.bg_grad.stops[1].opa = LV_OPA_COVER;
+    lv_area_t a = {0, 0, mask->header.w - 1, mask->header.h / 2 - 10};
+    lv_draw_rect(&layer, &rect_dsc, &a);
 
-    }
-    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);
-        int32_t line_space = lv_obj_get_style_text_line_space(obj, LV_PART_MAIN);
-        int32_t font_h = lv_font_get_line_height(font);
+    a.y1 = mask->header.h / 2 + 10;
+    a.y2 = mask->header.h - 1;
+    rect_dsc.bg_grad.stops[0].color = lv_color_white();
+    rect_dsc.bg_grad.stops[1].color = lv_color_black();
+    lv_draw_rect(&layer, &rect_dsc, &a);
 
-        lv_area_t roller_coords;
-        lv_obj_get_coords(obj, &roller_coords);
+    lv_canvas_finish_layer(canvas, &layer);
 
-        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_malloc(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);
-        mask_top_id = lv_draw_mask_add(fade_mask_top, NULL);
-
-        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_malloc(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);
-        mask_bottom_id = lv_draw_mask_add(fade_mask_bottom, NULL);
-
-    }
-    else if(code == LV_EVENT_DRAW_POST_END) {
-        lv_draw_mask_fade_param_t * fade_mask_top = lv_draw_mask_remove_id(mask_top_id);
-        lv_draw_mask_fade_param_t * fade_mask_bottom = lv_draw_mask_remove_id(mask_bottom_id);
-        lv_draw_mask_free_param(fade_mask_top);
-        lv_draw_mask_free_param(fade_mask_bottom);
-        lv_free(fade_mask_top);
-        lv_free(fade_mask_bottom);
-        mask_top_id = -1;
-        mask_bottom_id = -1;
-    }
+    /*Comment it to make the mask visible*/
+    lv_obj_delete(canvas);
 }
 
 /**
@@ -58,21 +40,18 @@ static void mask_event_cb(lv_event_t * e)
  */
 void lv_example_roller_3(void)
 {
+    lv_obj_set_style_bg_color(lv_screen_active(), lv_palette_main(LV_PALETTE_BLUE_GREY), 0);
+
     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_style_set_border_width(&style, 0);
-    lv_style_set_pad_all(&style, 0);
-    lv_obj_add_style(lv_screen_active(), &style, 0);
+    lv_style_set_radius(&style, 0);
 
     lv_obj_t * roller1 = lv_roller_create(lv_screen_active());
     lv_obj_add_style(roller1, &style, 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_obj_set_style_bg_opa(roller1, LV_OPA_50, LV_PART_SELECTED);
 
     lv_roller_set_options(roller1,
                           "January\n"
@@ -90,7 +69,14 @@ void lv_example_roller_3(void)
                           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);
+    lv_roller_set_visible_row_count(roller1, 4);
+
+    /* Create the mask to make the top and bottom part of roller faded.
+     * The width and height are empirical values for simplicity*/
+    LV_DRAW_BUF_DEFINE_STATIC(mask, 130, 150, LV_COLOR_FORMAT_L8);
+    LV_DRAW_BUF_INIT_STATIC(mask);
+
+    generate_mask(&mask);
+    lv_obj_set_style_bitmap_mask_src(roller1, &mask, 0);
 }
 #endif