Наложение CSS-градиента на фоновое изображение

В качестве фона можно задать одновременно градиент и изображение, указав их через запятую.

Для градиента при этом надо использовать цвета в формате rgba(), чтобы добавить прозрачность.

В этом примере белый цвет радиального градиента меняется от полной прозрачности rgba(255, 255, 255, 0) до полной непрозрачности rgba(255, 255, 255, 1).

Исходный код этого примера:

<style>
    .flower {
        width: 600px;
        height: 400px;
        background: radial-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 70%), url(flower.jpg);
    }
</style>
<div class="flower"></div>