PNG Background Color Change with CSS

Using the PNG’s transparency ability, I had an idea of changing the color of the PNG button with CSS. PNG’s are usually used to create a drop shadow on an item as it allows the color behind the PNG to show through the shadow regardless of what color is behind it. My idea came from reverse engineering a button thinking of what the shadows and reflections would look like without color. I set a color to the canvas layer and then began drawing transparent gradients over the top of it to creat the shadows and reflections I desired. Once I had a design that I liked, I hid the canvas color and exported the PNG. Then I began experimenting with the background colors through CSS. Here are the steps I use to create the button.

Designing the PNG

Start with a design that is simple so that you can get it into code quickly and begin playing with its colors. I am going to create a button that is similar to what Apple popularized, a split gradient. I am also using Fireworks as I find it quicker and easier to do most of my design work in versus using Photoshop. I am sure that using the steps outlined, you could follow along in Photoshop fairly closely.

Step 1

Open a new document. Set dimensions to 64 x 64. Select a canavas color that is easy to see. I wouldn’t start off with something light (white) as it will be difficult to see your reflections/shadows on while testing the background color.

Step 2

Select the square shape tool. Set the properties to gradient >> linear. Set both colors to black and set the transparencies to “50” and “0”.

Step 3

Draw a rectangle 64 x 32 on the lower half of the square with the darker part at the top. Make the direction of the gradient go top to bottom instead of left to right.

Step 4

Draw a second rectangle 64 x 32 on the upper half of the square with the darker part at the bottom. Make the direction of the gradient go top to bottom instead of left to right. Also set the darker part of the gradient to a transparency of “40”.

Step 5

Change the canvas color. This is to get an idea of how your PNG will look with different colors behind it. Once you find a color you like, make a note of its hexidecimal value as it will be used for the CSS.

Step 6

Make sure you have no color (transparent, checker board) selected on the canvas so that the transparency effect is working for what we need.

Step 7

Export the file as a PNG

Implementing the PNG into HTML and adding CSS

Step 1

Class the div and add your link text

<a href="#">
  <div class="pngButton">
    <p>PNG Button</p>

Step 2

Write the CSS for the div

.pngButton {
  background:url('transparent.png') repeat-x #c00;
.pngButton:hover {
.pngButton P {
  padding:0 20px;


The examples below all use the same PNG. The background and hover colors are controlled with the CSS classes that have the colors assigned to them. This makes the design easier to manipulate if you need to make color changes, versus having to recreate new images everytime.

Button 1

Button 2

Button 3

More From Matters of Grey

DIY Star Wars Snowflakes

With winter upon us, we thought it would be fun to share a fun project of ours with you: snowflake designs with a Star Wars twist. We created the original set of designs in 2010 and now have the largest collection of designs and templates on the internet. With The Force Awakens opening in December,... Read More

The Art Of Color Coordination {Infograph}

As web design practices such as keyword-rich content and fast page-loads become increasingly more important, the art of color coordination in a web site’s design can be one of the most challenging skills to master. Knowing how the color wheel works and how colors coordinate with each other can keep you from creating unpleasing results... Read More

Streamlining Google Web Fonts

Many designers have been adopting web fonts lately and quite a few of them use Google Web Fonts specifically. We recently posted an article about how to embed Google Web Fonts into web pages, today we want to show you some tips on how you can streamline your Google Web Font request. Implementing some of... Read More

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. JimTom


    great tut, i like
    but more i like to find people using good old Fireworks too 🙂