Dégradé WebKit à partir d'une image

Question

Est-ce que quelqu'un sait s'il existe un outil qui prendra une image (.png, .gif, etc.) et affichera le dégradé que contient l'image? Je veux vraiment recréer cette image en Cela ressemble à un mélange de dégradés linéaires et radiaux et est au-delà de mes compétences css

Answer 1

commencer à utiliser cet outil http://gradients.glrzad.com/ puis lire sur les gradients radiaux ici pour le rendre radial http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Vous pouvez obtenir ce jour avec cet outil:

-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% 
) 

Puis le rendre radial, mozilla seulement ici

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

et voici une image de ce qu'il ressemble à

Answer 2

Obtenir le dégradé à partir d'une image aléatoire va être difficile pour n'importe quel processeur d'image. Vous auriez probablement plus de chance en obtenant les données de pixels pour l'image, en trouvant les pixels du haut et du bas, en extrayant les données de couleur, puis en utilisant ces valeurs pour créer votre dégradé.

Answer 3

Votre exemple est un chevauchement de deux gradients radiaux. Il y a un arrêt blanc à mi-bleu vers le gradient radial opaque centré au-dessus du bouton avec une opacité moyenne; sur le dessus du dégradé radial bleu à blanc centré en bas à droite.