Как сделать градиентом иконки?

Question

[Lolka21]

Приветствую, есть задача... нужно сделать градиентом все иконки которые находятся в этом блоке, нужно что бы градиент слева на право шел, именно для иконок, ниже есть еще текст...

пример кода:

<div class="box">
  <div class="box__item">
    <div class="box__icon">
      <svg></svg>
    </div>
    <p class="box__txt">Lorem.</p>
  </div>
  <div class="box__item">
    <div class="box__icon">
      <svg></svg>
    </div>
    <p class="box__txt">Lorem.</p>
  </div>
  <div class="box__item">
    <div class="box__icon">
      <svg></svg>
    </div>
    <p class="box__txt">Lorem.</p>
  </div>
  <div class="box__item">
    <div class="box__icon">
      <svg></svg>
    </div>
    <p class="box__txt">Lorem.</p>
  </div>
  <div class="box__item">
    <div class="box__icon">
      <svg></svg>
    </div>
    <p class="box__txt">Lorem.</p>
  </div>
  <div class="box__item">
    <div class="box__icon">
      <svg></svg>
    </div>
    <p class="box__txt">Lorem.</p>
  </div>
  <div class="box__item">
    <div class="box__icon">
      <svg></svg>
    </div>
    <p class="box__txt">Lorem.</p>
  </div>
  <div class="box__item">
    <div class="box__icon">
      <svg></svg>
    </div>
    <p class="box__txt">Lorem.</p>
  </div>
  <div class="box__item">
    <div class="box__icon">
      <svg></svg>
    </div>
    <p class="box__txt">Lorem.</p>
  </div>
</div>

пример фото как должно быть


но текст на текст не должен градиент действовать, именно иконки (фото)

Comments

[Ankhena]

Ну почему вы не можете задать родительскому блоку градиент, а всему остальному белый фон/бордер/тени?

[Lolka21]

Ankhena, идея очень хорошая, я над ней думаю...

сама страница должна быть белая и только иконки с градиентом, градиент растягивается на весь блок

[Ankhena]

Lolka21, ну и пусть себе растягивается. Пока не вижу проблем.

[Lolka21]

вот пример кода, https://codepen.io/g3nnadie/pen/GROEjVq

как сделать что бы все было бело, а только box__icon принимал цвет фото градиента... ?

[Ankhena]

Lolka21, да я вроде написала, что нужно сделать.

вот пример кода

Ну круто, теперь нужно закрасить белым те куски, через которые не должен просвечивать градиент.
Начните с простого, задайте белый фон тексту.
Остальному через border/outline/тень