Можем ли мы разместить два градиента один над другим

Question

Ниже приведен линейный градиент для div:

div{
background: linear-gradient(112deg,#A0148C , #FF2896 37.1%, #F05A00 81.3%);
}

Можем ли мы поместить еще один CSS-градиент поверх этого (как другой слой поверх этого градиента)?

Answer 1

Да, вы можете просто перечислить фоны в свойстве, разделенные запятыми. Помните, что должна быть некоторая прозрачность в «верхнем» градиенте, чтобы «нижний» градиент был виден снизу:

div{
background: linear-gradient(rgba(255,0,0,0.2), rgba(0,0,255, 0.5)), linear-gradient(112deg,#A0148C , #FF2896 37.1%, #F05A00 81.3%);
}