Using CSS/JS to match an image with a solid background?

Question

css

Of course, you can process each image in Photoshop / Gimp, make a gradient to the desired background color. But maybe with the help of CSS and/or JavaScript it is possible to smoothly blend the image with a solid background?

Answer 1

If I understand you correctly, you need something like this effect.

Offhand, there are three obvious solutions:
- a script that will produce the finished image. Simple and effective.
- js/css box-shadow with inset. There are restrictions.
js/svg. Extremely limited use.

Answer 2

test: http://www.colorzilla.com/gradient-editor/

Answer 3

I recently wrote an article . The option is quite suitable for the picture.
Another way is to push the image into the background and apply a shadow with an inset as well.