Nolis
@Nolis
it-гопник

Как можно сверстать градиентный бордер на градиентном фоне?

Нужна вот такая кнопка:
647f58a92c06c417543545.png
Кто-то сталкивался с подобным? Градиентный фон + градиентный бордер.
Что пытался юзать: box-shadow, border-image-source. Никак не получается :(
Что предлагает фигма:
border: 1px solid;
border-image-source: linear-gradient(167.1deg, rgba(176, 149, 255, 0) 1.06%, rgba(176, 149, 255, 0.92) 92.98%);
  • Вопрос задан
  • 158 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Всё возможно.
Например, так



Поддержка в целом неплохая https://caniuse.com/css-masks
Но если надо более надежно, то css-маску можно поменять на svg-маску
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
UnluckySerivelha
@UnluckySerivelha
Прозрачность использовать нельзя, подбирайте цвет без использования прозрачности
Ответ написан
Попробуй варианты отсюда
Ответ написан
Комментировать
sharp97
@sharp97
не фонтан но брызги есть
на псведо элементах фоном сделай такой же блок закруглённый с градиентом(как варик)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы