Обсудить проект

Делаем простой линейный градиент тени у кнопки в Tilda

Данный код помогает добавить градиентную тень на вашу кнопку в zero-блок. Также возможно изменить направление градиента, цвет и его расположение

Главная
/
Модификации
/
Делаем простой линейный градиент тени

Заказать код

Вступить в чат

Предложить код

Видео-урок

Инструкция

Добавьте кнопку и присвойте class "sample"

Скопируйте и вставьте код ниже в блок "ST123"

Поменяйте цвета градиента на любые другие

Скопировать код

Код скопирован


 <!-- Делаем простой линейный градиент тени у кнопки в Tilda -->
 <!-- https://youx.agency/delaem-prostoj-linejnyj-gradient-teni-u-knopki-v-tilda -->

<style>

.sample {
  inline-size: 50vmin;
  block-size: 35vmin;
  background:  linear-gradient(
    to bottom right, 
    #FFD945, 
    #32BA7C
  );
  border-radius:30px;
  position: relative;
}

.sample::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #FFD945, 
    #32BA7C
  );
  z-index: -1;
  transform: translateY(15%) scale(.85);
  filter: blur(30px);
}

</style>