javascript - Fade Into Picture (CSS+PHP) -

i want create fade-effect seen in feedly mobile app:

i achieved effect gradients overlapping image.

i have extracted color value (e.g. #48a2a0). generate html php. how add color css? first idea use data-attributes, not seem work colors in gradient (which prefixed in 4 variants). not want add inline styles gradients keep files small. in best case i'd write gradient code once , use variable. javascript okay me too.

browser support: modern browsers , ie11