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 a small percentage of browsers in common usage that do not fully support it. That situation is improving dramatically as more companies are finally abandoning outdated browsers.

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

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 ImageMagick to generate the graphics.

Copyright © 2005-2018 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!