Такий ефект градієнта можна зробити за допомогою CSS параметра :before у батьківського елемента, а у верхній шар зображення міститься блок absolute з градієнтом та напівпрозорістю opacity.

Як зробити градієнт із прозорістю CSS?

Щоб додати прозорість, ми використовуємо функцію rgba() для визначення колірних зупинок. Останнім параметром функції rgba() може бути значення від 0 до 1, вона визначає прозорість кольору: 0 вказує на повну прозорість, 1 вказує на повний колір (без прозорості).

Як задати прозорість градієнту?

Натисніть правою кнопкою миші на значку заливки, у меню виберіть градієнт. 5.3 підведіть курсор миші до краю зображення або місця, що зберігатиме непрозорість, затисніть ліву кнопку миші і тягніть до того краю або місця зображення, де буде максимальна прозорість