Отзеркаливание блоков

Код зеркалит любые элементы по заданным параметрам.

Само свойство для вставки в ваш код:

  -webkit-box-reflect: below 0px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.9) 100%);
box-reflect: below 0px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.9) 100%);

Зеркалим все большие заголовки:

<style>
h1 {
  -webkit-box-reflect: below 0px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.9) 100%);
box-reflect: below 0px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.9) 100%);
  margin-bottom: 80px;
}
</style>

Зеркалим все средние заголовки

<style>
h2 {
  -webkit-box-reflect: below 0px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.9) 100%);
box-reflect: below 0px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.9) 100%);
  margin-bottom: 80px;
}
</style>

Зеркалим все маленькие заголовки

<style>
h3 {
  -webkit-box-reflect: below 0px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.9) 100%);
box-reflect: below 0px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.9) 100%);
  margin-bottom: 80px;
}
</style>

Зеркалим баннеры:

Так как отзеркаленный эффект вылезает за границы элемента, ниже отзеркаленного блока можете добавить блок "разделитель", чтобы отзеркаленный баннер не налезал на другие блоки

<style>
.picture-container {
-webkit-box-reflect: below 15px linear-gradient(transparent, rgba(0,0,0,0.4), rgba(0,0,0,0.8));

box-reflect: below 15px linear-gradient(transparent, rgba(0,0,0,0.4), rgba(0,0,0,0.8));


}
</style>

Блок-витрина

<div class="three-images"><p>
  Тариф 1
  </p>
  <p>
  Тариф 2
  </p>
  <p>
  Тариф 3
  </p>
 <img src="https://cc26299.tmweb.ru/files/%D0%A2%D0%B0%D1%80%D0%B8%D1%84%201.png">
<img src="https://cc26299.tmweb.ru/files/%D0%A2%D0%B0%D1%80%D0%B8%D1%84%201.png">
<img src="https://cc26299.tmweb.ru/files/%D0%A2%D0%B0%D1%80%D0%B8%D1%84%202.png">
</div>
<style>
.three-images {
  text-align: center;
  flex-wrap: wrap;
display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: 15px 0px 80px 0px;
}
  .three-images p {
  flex-basis: 33%;
font-family: Gilroy;
font-style: normal;
font-weight: 800;
font-size: 22px;
line-height: 26px;
letter-spacing: 0.02em;
color: white;
  margin-bottom: 10px;
}
.three-images img {
flex-basis: 33%;
  max-width: 75px;
  -webkit-box-reflect: below 16px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
box-reflect: below 16px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
}
</style>

Зеркалим стандартные кнопочки

<style>
.block-link {
  -webkit-box-reflect: below 16px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
box-reflect: below 16px linear-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
  margin-bottom: 80px;
}
</style>

Блок с отзеркаленной справа картинкой, поверх которой текст:

<div class="img-with-text">
  <img src="https://cc26299.tmweb.ru/files/%D0%A2%D0%B0%D1%80%D0%B8%D1%84%201.png">
  <p>Начни зарабатывать от 80 000 р. в месяц на наращивании ресниц, освоив авторский метод увеличения скорости процедуры</p>

</div>
<style>
.img-with-text {
display: flex;
 flex-direction: row;
  justify-content: space-between;
  width: calc(100vw - 30px);
  margin: auto;
}
  .img-with-text img {
flex-basis: 50%;
  max-width: 50%;
  box-sizing: border-box;
      margin: auto;
    -webkit-box-reflect: right 10px linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.15));
box-reflect: right 10px linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.15));
}
  .img-with-text p {
  padding: 15px 10px 20px 5px;
flex-basis: 50%;
 margin-left: 10px;
  box-sizing: border-box;
  font-family: Gilroy;
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 20px;
letter-spacing: 0.02em;
}
</style>