Как сверстать такой эелемени?
Может я сбредил, но мне кажется, что в этой ситуации очень хорошо справится SVG.
А потом fill: linear-gradient();
Во-первых, качество не потеряется даже на самом широком экране.
Во-вторых, меньше картинок подгружаем.
В-третьих, если вдруг захотите изменить цвет, то Вам не нужно будет изменять картинку и грузить новую, просто измените цвет в css.
Создать новый пустой слой под слоями с эффектами и merge down (так Ctrl+E называется?)