Градиентная рамка
Сначала добавим паддинг для .gradient-container. От размера этого паддинга будет зависеть толщина будущей «рамки».
Теперь зададим фон .gradient-container с использованием повторяющегося линейного градиента. Именно благодаря повторяющемуся линейному градиенту получается просто и быстро сделать красивый градиент для рамки.
Добавляем свойство border-radius для .gradient-container, скругляя углы контейнера, придавая ему более мягкий вид.
Добавляем box-shadow для .gradient-container. Это свойство создаёт тень, добавляя глубину и выделяя элемент на странице.
Переходим к вложенному контейнеру — .card. Зададим его ширину.
И добавим .card внутренний отступ, обеспечивая пространство вокруг содержимого карточки.
Теперь зададим вложенному контейнеру фоновый цвет, который перекроет градиентный фон внешнего контейнера, и благодаря этому появится эффект градиентной рамки.
Осталось добавить свойство border-radius для .card. Обратите внимание, что радиус скругления у вложенного контейнера чуть меньше, чем у внешнего.
Эффект градиентной рамки готов. Теперь можете самостоятельно поэкспериментировать с её внешним видом: меняйте параметры градиента (наклон, цвета, размеры колорстопов), «ширину» градиентной рамки, цвета других элементов и делитесь результатом с друзьями.
А разобраться с линейными градиентами с нуля вы можете в интерактивном курсе «Линейные градиенты».
