Градиентная рамка для карточки!

Иногда нужно визуально выделить карточку или кнопку, но обычный border выглядит слишком просто. В этом приёме рамка создаётся отдельным слоем с градиентом.

Как работает:

• псевдоэлемент ::before создаёт слой градиентной рамки;

• inset расширяет его за пределы блока, формируя контур;

• border-radius: inherit сохраняет форму карточки;

• при наведении меняется яркость и масштаб рамки.

Это простой способ добавить акцент и глубину интерфейсным элементам без дополнительных обёрток и изображений.

Code Ready | #фишка