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

Question

[Andrey Vasilev]

Нужна вот такая кнопка:

Кто-то сталкивался с подобным? Градиентный фон + градиентный бордер.
Что пытался юзать: 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%);

Answer 1

[Сергей delphinpro]

Всё возможно.
Например, так



Поддержка в целом неплохая https://caniuse.com/css-masks
Но если надо более надежно, то css-маску можно поменять на svg-маску

Comments

[Andrey Vasilev]

Спасибо большое, так и знал что решение есть :)

[modelair]

не под сафари

[modelair]

не понимает rem в rx, ry. нужна замена на px или на численное значение

Answer 2

[Dymok]

Прозрачность использовать нельзя, подбирайте цвет без использования прозрачности

Comments

[Andrey Vasilev]

Спасибо, это мне подходит, но хотелось бы всё-таки понять как можно было бы реализовать с прозрачностью

[modelair]

Andrey Vasilev, с прозрачностью вы получите всякого рода нерешаемые эффекты

[Andrey Vasilev]

modelair, есть ведь какая-то альтернатива? Не хочется вставлять картинкой обычную кнопку. Ну вот так вот задумано по дизайну. Если ни к чему не приду - постараюсь объяснить заказчику что такое в принципе не реализовать.

[modelair]

Andrey Vasilev, я хотел себе такие, перебрал разные варианты. box-shadow, filter с dropshadow, псевдо. оно как бы работает, но с прозрачностью начинаются косяки, решения которым ни своими силами, ни в инете я не нашел. отказался от бордера.
а без прозрачности варианты отлично смотрятся )

[modelair]

возможно вот Ankhena что-то подскажет :)

[Ankhena]

modelair, https://qna.habr.com/q/1156102

Answer 3

[Филипп Гинкель]

Попробуй варианты отсюда

Answer 4

[sharpsss]

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

Comments

[Andrey Vasilev]

делал, из-за прозрачности обоих - накладываются друг на друга :(

[sharpsss]

Andrey Vasilev, вон там чел выше написал что я хотел сказать)) то что не надо юзать прозрачность, в принципе это как раз что я имел ввиду у него, если можешь отметь мой ответ трушным тоже пажалста)