Как сделать данный градиент?

Question

[WebforSelf]

Кто как делает градиенты? обычно копирую с avocode , а тут на деле картинка такая



А авокод выдает

background-image: linear-gradient(to top, #ea3a2f 0%, #f1414e 100%);

И как его собрать чтоб точно такой же был. Вручную только? или есть какие то генераторы градиента по изображению?

Comments

[Андрей Федоров]

Тут явно clip-path + градиент. Если вы хотите ТОЛЬКО градиентом такое реализовать, то это будет работать только на белом фоне.

[WebforSelf]

Андрей Федоров, c clip path проблем нет, а вот градиент как точь в точь вывести?

[Андрей Федоров]

WebforSelf, а, я понял, градиент тут не совсем линейный, на моей мониторе плохо видно. Тогда можно еще 2 радиальных эллипса наложить, но подбирать значения, это будет ад.

[WebforSelf]

Андрей Федоров, проще похоже изображение подложить и все)

[Андрей Федоров]

WebforSelf, ну, если бы вы спрашивали как подложить поход похожее изображение, наверно ответ был бы другой. )

Answer 1

[Softlink]

Здесь clip-path напрашивается. А подстроить под ваши размеры можно пиксель-перфектом каким-нибудь.

Comments

[WebforSelf]

это расширение для браузера? просто постоянно сижу долго над градиентом высчитывая чтоб похоже было. Может думал как то с изображения уже можно генерить. а clip path тут само собой.

[Softlink]

Да, понял, что у вас проблема - повторить градиент. К сожалению, сервисов генерации градиентов по картинке не знаю. Скорее всего придется подбирать градиент на глаз.

[Softlink]

WebforSelf нашелся вот такой сервис.