WebKit градиент от изображения

Question

Кто-нибудь знает, есть ли инструмент, который будет брать изображение (.png, .gif и т. Д.) И выводить градиент, который содержит изображение?

Я действительно хочу воссоздать это изображение в css.Выглядит как смесь линейных и радиальных градиентов и выходит за рамки моих навыков CSS

Answer 1

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

Answer 2

Начните работу с этим инструментом http://gradients.glrzad.com/, а затем прочитайте о радиальных градиентах здесь, чтобы сделать его радиальным http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Вы можете продвинуться далеко с этим инструментом:

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(68,214,254)),
    color-stop(0.49, rgb(53,150,230)),
    color-stop(0.51, rgb(123,180,236)),
    color-stop(1, rgb(255,255,255))
)
-moz-linear-gradient(
    center bottom,
    rgb(68,214,254) 0%,
    rgb(53,150,230) 49%,
    rgb(123,180,236) 51%,
    rgb(255,255,255) 100%
)

Тогда сделайте его радиальным, Mozilla только здесь

-moz-radial-gradient(right bottom, 
   ellipse, 
   #44D6FE 0%, 
   #3596E6 49%, 
   #7BB4EC 51%, 
   #FFFFFF 100%) repeat scroll 0 0 transparent

и вот изображение того, как оно выглядит

Answer 3

Ваш пример - это перекрытие двух радиальных градиентов. От кнопки до середины непрозрачности имеется остановка от белого до среднего синего с непрозрачным радиальным градиентом; сверху простого синего до белого радиального градиента с центром в правом нижнем углу.