Генератор градиентной рамки (CSS)

Генератор градиентной рамки (CSS): для чего нужен

Очевидный способ сделать рамку с градиентом, border-image, игнорирует скруглённые углы. Этот генератор использует технику двух слоёв фона (padding-box и border-box), которая сохраняет border-radius, или маску с mask-composite, когда у карточки должен быть прозрачный фон.

Выберите два или три цвета, угол, толщину и скругление и при желании вращающуюся рамку на conic-gradient и переменной угла, зарегистрированной через @property, отключённую для тех, кто просил меньше движения.

Как пользоваться

1. Выберите цвета и угол.
2. Настройте толщину, скругление и фон.
3. Скопируйте CSS и примените класс.

Когда использовать

• Выделенная карточка тарифа.
• Фото профиля с цветной рамкой.
• Главная кнопка призыва к действию.

Частые вопросы

Почему не использовать border-image?

С border-image градиент работает, но скруглённые углы (border-radius) игнорируются. Техника этого генератора рисует градиент как второй слой фона, видимый только в области рамки, и тогда углы остаются круглыми.

А если фон карточки прозрачный?

Отметьте прозрачный фон: код начинает использовать маску (mask) для вырезания середины, и то, что находится за карточкой, видно внутри рамки.

Как работает вращающаяся рамка?

Градиент конический, а угол — переменная, зарегистрированная через @property, которую CSS умеет анимировать. Для тех, кто просил меньше движения, анимация отключена.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты