Как сделать градиентную рамку в CSS: 3 рабочих способа

Градиентную рамку в CSS можно собрать через border-image, два фоновых слоя или псевдоэлемент с маской. Первый способ подходит для прямых углов, второй сохраняет скругление, третий оставляет центр прозрачным. В статье есть готовая разметка для блоков и изображений, а также примеры вертикального, горизонтального и диагонального градиента.

Рамка через border-image

Свойство border-image использует градиент как источник изображения для рамки. Способ подходит для блока с прямыми углами и требует ненулевой ширины рамки.

Сначала добавьте элемент в HTML. Один и тот же класс подойдет для следующих примеров.

<div class="box"></div>

В CSS задайте прозрачную рамку толщиной 8 пикселей. Затем передайте градиент в border-image и добавьте значение разреза 1.

.box {
  width: 250px;
  min-height: 150px;
  margin: 24px auto;
  padding: 24px;
  background: #eee;
  border: 8px solid transparent;
  border-image: linear-gradient(to bottom, #3acfd5, #3a4ed5) 1;
}

Градиент идет сверху вниз, а значение 8px задает толщину рамки. Число 1 определяет разрезы изображения для углов и сторон.

Для прозрачного центра удалите строку background: #eee. Тогда содержимое блока и фон родителя останутся видимыми внутри рамки.

Горизонтальный и диагональный переход

Направление задает первое значение функции linear-gradient. Замените только объявление border-image, сохранив значение разреза 1.

/* Слева направо */
.box {
  border-image: linear-gradient(to right, #3acfd5, #3a4ed5) 1;
}

/* По диагонали */
.box {
  border-image: linear-gradient(135deg, #3acfd5, #3a4ed5) 1;
}

Значение to right направляет переход слева направо. Угол 135deg задает диагональный переход, а другие значения меняют его наклон.

Что происходит с border-radius

border-image не повторяет скругление из border-radius. Углы градиентной рамки останутся прямыми, хотя фон блока можно скруглить. Для круглых углов используйте фоновые слои или псевдоэлемент с маской.

Рамка через фоновые слои

Два фоновых слоя позволяют сделать скругленную рамку без псевдоэлементов. Первый слой заполняет внутреннюю область, второй занимает весь блок вместе с рамкой.

Свойство background-clip ограничивает область отрисовки каждого слоя. Прозрачная рамка показывает нижний градиент по краям, а верхний фон скрывает его в центре.

.box {
  width: 250px;
  min-height: 150px;
  margin: 24px auto;
  padding: 24px;
  border: 8px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(#eee, #eee) padding-box,
    linear-gradient(135deg, #3acfd5, #3a4ed5) border-box;
}

Первый слой закрашивает область внутри рамки цветом #eee. Второй слой виден по краям и повторяет радиус блока, поэтому углы остаются скругленными.

Прозрачный центр поверх фона

Свойство background-clip не вырезает отверстие в верхнем слое. Если заменить #eee на transparent, нижний градиент заполнит центр блока.

Для прозрачного центра используйте псевдоэлемент с маской. Такой вариант оставляет фон родителя видимым и одновременно сохраняет скругленную границу.

Градиентная рамка для изображения

Для изображения удобно использовать обертку с отступом. Обертка получает градиентный фон, а картинка закрывает внутреннюю область.

<div class="image-frame">
  <img src="photo.jpg" alt="Пейзаж у озера">
</div>

.image-frame {
  width: 320px;
  padding: 8px;
  border-radius: 20px;
  background: linear-gradient(135deg, #3acfd5, #3a4ed5);
}

.image-frame img {
  display: block;
  width: 100%;
  border-radius: 12px;
}

Отступ обертки задает толщину рамки. Радиус изображения сделайте меньше радиуса контейнера, чтобы края совпали.

Рамка через псевдоэлемент и mask

Псевдоэлемент отделяет декоративный контур от содержимого блока. Этот прием подходит для прозрачной карточки, фона с изображением и других неоднородных поверхностей.

Свойство mask-composite объединяет две маски. Операция exclude удаляет внутреннюю область и оставляет только границу.

<div class="masked-box">
  Содержимое блока
</div>

.masked-box {
  position: relative;
  min-height: 150px;
  padding: 24px;
  border-radius: 20px;
  background: transparent;
}

.masked-box::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 8px;
  border-radius: inherit;
  background: linear-gradient(135deg, #3acfd5, #3a4ed5);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

Псевдоэлемент рисует контур поверх блока, а маска оставляет центр прозрачным. Значение pointer-events: none сохраняет клики по ссылкам и кнопкам внутри карточки.

Маска для изображения

Тот же прием можно применить к обертке изображения. Псевдоэлемент наложит контур поверх картинки и не увеличит размеры контейнера.

<div class="masked-image">
  <img src="photo.jpg" alt="Пейзаж у озера">
</div>

.masked-image {
  position: relative;
  width: 320px;
  border-radius: 20px;
}

.masked-image img {
  display: block;
  width: 100%;
  border-radius: inherit;
}

.masked-image::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 8px;
  border-radius: inherit;
  background: linear-gradient(45deg, #3acfd5, #3a4ed5);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

Измените padding псевдоэлемента, чтобы сделать контур толще или тоньше.

Сравнение способов градиентной рамки

Выбирайте прием по форме углов, фону внутри блока и типу содержимого. border-image дает короткий код, фоновые слои подходят для обычной карточки, а маска сохраняет прозрачный центр со скруглением.

Как выбрать направление градиента

Во всех трех подходах направление задает первое значение linear-gradient. Цвета, толщину рамки и радиус можно оставить прежними.

• Вертикаль. Используйте to bottom для перехода сверху вниз.
• Горизонталь. Используйте to right для перехода слева направо.
• Диагональ. Укажите to bottom right или задайте угол в градусах.
• Точный угол. Используйте значение вроде 135deg.

Значение 0deg направляет переход вверх, 90deg – вправо, 180deg – вниз. Направление через стороны света зависит от пропорций блока, а угол в градусах задает фиксированный наклон.

Какой способ выбрать для блока или изображения

Для прямоугольного блока с прозрачным центром берите border-image. Для карточки со скругленными углами используйте фоновые слои. Маска подходит для прозрачного центра поверх фона или изображения.

Для картинки с рамкой добавьте обертку и задайте ей отступ. Если контур должен лежать поверх изображения, примените псевдоэлемент с маской.

Начните с толщины рамки 8 пикселей и радиуса 20 пикселей. Затем измените цвета, направление и размеры под свой макет.

Совет от нашей редакции: храните толщину рамки и радиус в начале CSS-блока, чтобы менять оформление в одном месте.