Free PNGs for Creating Transparent Fills

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

If you have worked much with CSS opacity, you know that one of the most frustrating things about it is that by setting it on any page element, it forces it child elements to be transparent also. I would love to hear a technical explanation for that blunder! There are some workarounds, but they involve fancy positioning footwork and are not ideal for large-scale use.

One of the most common and simple uses for transparency is transparent fills on divs. This is a highly desirable and nice looking effect. For example, if you use textured backgrounds like I like to, you can set off text boxes with this effect:

In a perfect world, all we should have to do to achieve this is to set a background-color and opacity value for the container div. But if we do that, the text will take on that transparency as well and become much less readable.

The solution is to using alpha-transparent PNG’s to fill the backgrounds of our divs. Here are a bunch of the standard “fills” that I use:

Black 90%

Black 75%

Black 50%

Black 25%

Black 10%

Brown 90%

Brown 75%

Brown 50%

Brown 25%

Brown 10%

Blue 90%

Blue 75%

Blue 50%

Blue 25%

Blue 10%

Red 90%

Red 75%

Red 50%

Red 25%

Red 10%

Orange 90%

Orange 75%

Orange 50%

Orange 25%

Orange 10%


View DemoDownload Files


What about IE 6?

Everybody knows IE 6 doesn’t support alpha transparency right? Right. There are fixes for this. My favorite way is the HTC file method. It’s not valid CSS, but you could always toss it in an IE-Only stylesheet. In the demo linked to above, I have applied the hack, but it’s borked on purpose so you can see how IE 6 handles this. It cannot repeat or position the background image if you use this hack. Not a big deal, just make the fill graphic the exact size you need it. Since it’s a flat color, the file size won’t be that much bigger. As a quick note, this method has been known to mess with anchor links on occasion, so I’m wary using it on huge-scale sites without a ton of testing.