#10432·lvgl

[NanoVG] Gradient doesn't work

Author: ajax-prykhodko-aCreated Aug 6, 2026Updated Sep 15, 2026

Labelsdraw-nanovg

LVGL version

9.6.0

Platform

SDL with NanoVG

What happened?

Expected

Actual

and in tests same problem can be seen

https://github.com/lvgl/lvgl/blob/master/tests/ref_imgs/draw/render/argb8888/demo_render_linear_gradient_opa_255.png

https://github.com/lvgl/lvgl/blob/master/tests/ref_imgs_nanovg/draw/render/argb8888/demo_render_linear_gradient_opa_255.png

How to reproduce?

    lv_obj_t* root = lv_obj_create(lv_screen_active());
    lv_obj_remove_style_all(root);

    lv_obj_set_size(root, LV_PCT(100), LV_PCT(100));
    lv_obj_set_style_bg_grad_dir(root, LV_GRAD_DIR_VER, 0);
    lv_obj_set_style_bg_color(root, lv_color_black(), 0);
    lv_obj_set_style_bg_grad_color(root, lv_color_black(), 0);
    lv_obj_set_style_bg_opa(root, LV_OPA_COVER, 0);
    lv_obj_set_style_bg_main_stop(root, 255 * 30 / 100, 0);
    lv_obj_set_style_bg_main_opa(root, LV_OPA_COVER, 0);
    lv_obj_set_style_bg_grad_opa(root, LV_OPA_TRANSP, 0);

The problem is within shaders. It's not clear why lvgl's nanovg is slightly different from nanovg master

https://github.com/memononen/nanovg/issues/178


static const char * fillFragShader =
        "#ifdef GL_ES\n"
        "#if defined(NANOVG_GL3)\n"
        " precision highp float;\n"
        "#else\n"
        " precision mediump float;\n"
        "#endif\n"
        "#endif\n"

static const char* fillFragShader =
	"#ifdef GL_ES\n"
	"#if defined(GL_FRAGMENT_PRECISION_HIGH) || defined(NANOVG_GL3)\n"
	" precision highp float;\n"
	"#else\n"
	" precision mediump float;\n"
	"#endif\n"
	"#endif\n"

Source: lvgl/lvgl

View original on GitHub View discussion on GitHub