Gradient Generators

December 30, 2011 (last modified: January 13, 2012)

The scripts below generate a gradient or pattern on the fly based on parameters specified in the query string. These are very useful when working on a project that requires one of these simple patterns, but you are unsure of the exact colors or dimensions. Rather than fooling around with an image editor, just link to one of the scripts below and change the parameters as you see fit. These scripts run very quickly, and generate PNGs with a very low filesize.

 


Horizontal Gradient

 

Vertical Gradient

 

Transitional Gradient

Written originally to smoothly blend a vertical gradient into a horizontal gradient. It works fine in that context, but it also looks cool on its own.

 
 

Vertical Gradient w/ stripe

I've seen this gradient pattern used on many sites recently. I decided to automate it. Specify gradient colors, stripe color, widths, etc.

 
 
 

Vertical Gradient w/ checker

Vertical gradient with checkered overlay. Specify gradient colors, checker color, and checker size.

 
 

Vertical Gradient w/ pattern

Vertical gradient with custom pattern. Specify gradient colors, pattern color, pattern dimensions, and pattern. Any background based on a vertical gradient can be generated on the fly.

 
 
 
 
 
 
 

Horizontal Gradient w/ pattern

Horizontal gradient with custom pattern. Specify gradient colors, pattern color, pattern dimensions, and pattern. Any background based on a horizontal gradient can be generated on the fly.

 
 
 
 
 
 
 

Add new comment

By submitting this form, you accept the Mollom privacy policy.