Градиентная обводка блока на CSS

Создание современных сайтов сопровождается использованием анимаций, как для отдельных элементов дизайна, так и целых блоков. Сегодня мы рассмотрим как сделать красивую градиентную обводку блока на одном только CSS?

Рассмотрим пару вариантов градиентных обводок.

1. Прямоугольная обводка с острыми углами

Cделаем следующее:

1. Создадим div.linear-gradient с градиентным фоном;

2. Создадим внутренний блок div с небольшим отступом.

Разметка HTML

<<div class="module-border-wrap">
   <div class="module">
     Современные технологии достигли такого уровня, 
     что сплоченность команды профессионалов прекрасно подходит для реализации вывода текущих активов. 
     Кстати, предприниматели в сети интернет объединены в целые кластеры себе подобных.
   </div>
</div>

Стили CSS

.module-border-wrap {
  max-width: 250px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, red, purple);
  padding: 3px;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}

Результат

2. Прямоугольная обводка с закругленными углами на псевдоэлементах ::before и ::after

Разметка HTML

<div class="gradient-box">
  <p>
    Современные технологии достигли такого уровня, что сплоченность команды профессионалов 
    прекрасно подходит для реализации вывода текущих активов. Кстати, предприниматели в сети 
    интернет объединены в целые кластеры себе подобных.
  </p>
</div>

.gradient-box {
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
  max-width: 22em;
  position: relative;
  padding: 3em;
  box-sizing: border-box;
  color: #FFF;
  background: #000;
  background-clip: padding-box; /* !important */
  border: solid 5px transparent; /* !important */
  border-radius: 1em;
}

.gradient-box:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: inherit; /* !importanté */
    background: linear-gradient(to right, red, orange);
  }

.gradient-box:after {
    content: '';
    position: absolute;
    top: 5px; right: 5px; bottom: 5px; left: 5px;
    border-radius: inherit; /* !importanté */
    background: linear-gradient(to right, red, orange);
    background: #000;
  }

p {
   z-index:10;
}

Результат