Двойной градиент

08 декабря 2021, 13:10

Извините за такой глупый вопрос. Есть фоновая картинка, и по макету на этой картинке есть два, идентичных по цвету, градиента, но под разными углами. У меня возник вопрос, возможно ли установить, с помощью css или js, поверх картинки 2 или более слоев прозрачного градиента, не прибегая к простому редактированию картинки в редакторе. Буду благодарен за помощь.

Answer 1

Можно сделать один элемент над изображением и в нем все градиенты собрать через background-blend-mode. Пример и описание есть тут: https://webformyself.com/effekty-rezhimov-nalozheniya-fona-css/

Можно отдельными элементами собирать градиент сверху - зависит от ваших дальнейших взаимодействий и желаний. Пример с двумя блоками сверху:

.test { 
  position: relative; 
  width: 200px; 
  height: 400px; 
   
  overflow: hidden; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  
} 
 
.test .test__img { 
  height: 100%; 
  width: auto; 
} 
 
.test__gradient { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
} 
 
.test__gradient--left { 
  background: linear-gradient(45deg, rgba(0,0,255,0), rgba(0,0,255,.3)); 
} 
 
.test__gradient--right { 
  background: linear-gradient(-45deg, rgba(255,0,0,0), rgba(255,0,0,.3)); 
}

<div class="test"> 
  <img class="test__img" src="https://avatars.mds.yandex.net/get-pdb/368827/34d844fa-c68c-48b7-92a8-102ea556b824/s1200" alt="flamingo"> 
  <div class="test__gradient test__gradient--left"></div> 
  <div class="test__gradient test__gradient--right"></div> 
</div>