группа div с линейным градиентом

Question

У меня такой элемент в макете.Вставляется картинка (png) В связи с тем, что мне нужно делать адаптивные, каринка меня не устраивает.Возможно ли применить градиент как дочерний элемент?

background-image: linear-gradient(to left, #4747f6 0%, #f27d66 100%);

Answer 1

Идея состоит в том, чтобы положиться на background-attachment:fixed, и вы сможете применить градиент к каждому элементу, и в результате вы получите один градиент:

.container {
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 0;
  background: linear-gradient(to left, #4747f6 0%, #f27d66 100%) center/100% 4px no-repeat;
}

.container>div {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to left, #4747f6 0%, #f27d66 100%) fixed;
}

.container:before,
.container:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% - 5px);
  height: 10px;
  left: 0;
  width: 10px;
  border-radius: 50%;
  background: linear-gradient(to left, #4747f6 0%, #f27d66 100%) fixed;
}

.container:after {
  right: 0;
  left: auto;
}

body {
  margin: 0;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>