Gradient color change on the fly

I am trying to change the hue / saturation / lightness of a linear gradient on the fly using jQuery. For some reason, I just can't wrap my head around how this can be done. I am using jQuery gradient plugin here: http://codecanyon.net/item/jquery-gradient-creator/full_screen_preview/2054676 . For HSL selectors, I use the plugin here: http://www.virtuosoft.eu/code/bootstrap-colorpickersliders/ . The gradient plugin accepts RGB values ​​that I can update and then update the plugin when the HSL sliders have changed. I guess I got confused on how to change each of the gradient colors on the fly using hsl. Maybe someone can enlighten me on the general process of how this can be done.

I need it to work similarly to this (press hue / saturation when you get to the page): http://www.colorzilla.com/gradient-editor/

+4
source share
1 answer

In short, you will need to extract each of the colors, convert to hsl, do the customization, and then set the colors in the css gradient with the new colors, for example

$(myelement).css('background', 'linear-gradient(to bottom, '+ newColor1 +' 0%, ' + newColor2 +' 100%);

Is this what you were looking for?

+2
source

Source: https://habr.com/ru/post/1529727/


All Articles