• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1257
  • Last Modified:

ImageMagick Gradient with weighted fading (which color has highest percent of visibiity)

This command properly draws a 1 pixel x 100 pixel green to transparent gradient which is the echo'd to the screen.

exec ("convert -size 1x100 gradient:green-none ".$_SERVER['DOCUMENT_ROOT']."/temp/FAFAFA_trans2.png");
echo "<img src='/temp/FAFAFA_trans2.png' width='100' height='500'>";

However, it's a 50/50 bleed of green turning into transparent at the end.
I'm looking to have that transparency fade out much sooner. more like a 20/80 gradient.  How can I create such an 'on the fly' gradient image weighting the strength of one color vs another.


Jay Lepore
Jay Lepore
  • 2
  • 2
1 Solution
Pedro ChagasWebmasterCommented:
Hi, can you show a image that show what you want?
Jay LeporeAuthor Commented:
Yes, Please have a look at this link: http://www.titeurl.com/imagick
I have created two simple gradients.  The first one was actually created using the code above ie;
exec ("convert -size 1x100 gradient:green-none ".$_SERVER['DOCUMENT_ROOT']."/temp/FAFAFA_trans2.png");
echo "<img src='/temp/FAFAFA_trans2.png' width='100' height='500'>";

However, I cannot find an example in the Imagemagick documentation showing how I might adjust the length of the green vs the transparent.  So for instance, if I am creating a 100 pixel gradient of green and white, what if I wish for 20% to be green and 80% whilte or something like that.  

Does that make it more understandable ?

Pedro ChagasWebmasterCommented:
Richard QuadlingSenior Software DeverloperCommented:
http://www.imagemagick.org/Usage/canvas/#gradient_transparent covers a lot of options and describes the limitations of the gradient option.

http://www.imagemagick.org/Usage/canvas/#gradient_histogram may be more on what you are looking for.

Using ...
convert -size 100x100 gradient: -sigmoidal-contrast 1,10% gradient_sigmoidal_1_10.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 1,20% gradient_sigmoidal_1_20.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 1,30% gradient_sigmoidal_1_30.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 1,40% gradient_sigmoidal_1_40.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 1,50% gradient_sigmoidal_1_50.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 1,60% gradient_sigmoidal_1_60.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 1,70% gradient_sigmoidal_1_70.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 1,80% gradient_sigmoidal_1_80.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 1,90% gradient_sigmoidal_1_90.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 6,10% gradient_sigmoidal_6_10.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 6,20% gradient_sigmoidal_6_20.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 6,30% gradient_sigmoidal_6_30.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 6,40% gradient_sigmoidal_6_40.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 6,50% gradient_sigmoidal_6_50.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 6,60% gradient_sigmoidal_6_60.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 6,70% gradient_sigmoidal_6_70.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 6,80% gradient_sigmoidal_6_80.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 6,90% gradient_sigmoidal_6_90.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 9,10% gradient_sigmoidal_9_10.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 9,20% gradient_sigmoidal_9_20.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 9,30% gradient_sigmoidal_9_30.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 9,40% gradient_sigmoidal_9_40.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 9,50% gradient_sigmoidal_9_50.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 9,60% gradient_sigmoidal_9_60.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 9,70% gradient_sigmoidal_9_70.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 9,80% gradient_sigmoidal_9_80.jpg
convert -size 100x100 gradient: -sigmoidal-contrast 9,90% gradient_sigmoidal_9_90.jpg

Open in new window

i've produced a set of images. I've zipped them together.
Richard QuadlingSenior Software DeverloperCommented:
OK. I missed a bit.

Using the sigmoidal images, you use that as an alpha overlay on top of the solid green image.

I THINK this may be what you are looking for...

convert -size 100x100 canvas:green xc: gradient: -sigmoidal-contrast 2,80% -composite green_2_80.png

Open in new window

Green with a gentle fade to transparent.

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now