Transparent Background Generator

Transparent backgrounds are all the rage, but for the beginning website designer, they can present a challenge. I have a fine arsenal of graphics programs, but my ability to use them for anything more complex than cropping or other minor adjustments is embarassingly limited. So I often turn to software solutions that don't require any great knowledge or steady hand on the mouse to make my life easier. I created this tool to make transparent (or, more precisely, translucent) images for that reason.

Another reason I created this tool is that while CSS3 provides new methods for creating gradient backgrounds, there are still nearly 10% of browsers in common usage that do not support it. That situation does not appear likely to change significantly for at least another year, so for commercial websites we are left with choosing between including compromise or fallback settings in the CSS stylesheet, or relying on image files to achieve the desired effects.

This tool creates a PNG image file of the specified width and height (from 10 to 1280 pixels) using the color and transparency level you choose. You can click on the small palette icon to pick the color, or specify the color with a HEX triplet (starting with a '#'). If you choose the Gradient option, a vertical gradient transparency effect will be used that starts with 0% opacity at the top and 100% opacity at the bottom. So if you need a horizontal gradient, you'll have to swap your width and height settings and then rotate the image in your favorite graphics program after you download it.

No   Yes
  Click Here to Pick the Color

Yes, I'm using several features of HTML 5 for this <form>. It made it much easier to limit user inputs to the acceptable ranges (which I tried to make as open as possible and practical). If you have trouble, click on the "Talk To Me" link at the bottom of the page.

I used the Tigra Color Picker to supplement this page, and ImageMagick to generate the graphics.

Copyright © 2005-2017 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!

  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!