Анимированная градиентная рамка на CSS Сегодня разберем красивый и модный визуальный эффект — анимированную градиентную рамку, которая красиво переливается. HTML: <div class="rainbow"></div> Контейнер для карточки. CSS для карточки: .rainbow { position: relative; width: 400px; height: 300px; border-radius: 12px; overflow: hidden; } Задаем размеры и скругляем углы. overflow: hidden — обрезаем все, что выходит за пределы контейнера. Вращающийся слой: .rainbow::before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: conic-gradient(red, orange, yellow, red); animation: rotate 4s linear infinite; } Создаем градиент, который в 2 раза шире и выше самого родителя. Сдвигая его на top: -50%; left: -50%;, мы центрируем его относительно нашего .rainbow, а animation заставляет этот слой бесконечно вращаться. Белый внутренний слой: .rainbow::after { content: ""; position: absolute; inset: 10px; background: white; border-radius: 8px; } Накрываем вращающийся градиент почти полностью, оставляем видимыми только 10 пикселей по периметру — это и есть наша рамка. Анимация: @keyframes rotate { to { transform: rotate(360deg); } } Простая анимация, которая вращает ::before на 360 градусов. Такой эффект отлично подойдет для привлечения внимания к важным элементам на странице) Результат, как всегда, здесь.