Making a Perfectly Colorized Header

The CSS filter: property

While much of CSS's features are for positioning, a few of them exist to improve CSS's graphic design capabilities. One such feature is the filter: attribute. It does almost exactly what you'd expect - it applies a graphical filter to an element.

I've found filter: very useful to blur images, but be forewarned: if the image is set with the background-image attribute, then anything above the background image will also be blurred. It's as simple as adding filter: blur(5px); to the image's CSS.

What we'll do today is a bit more complicated. I want to colorize an image with only CSS. An example of this effect can be found on the template Forty Sadly, CSS doesn't have a filter: colorize yet, so we'll have to get creative.

We'll do this with a class called "myImage", used on <img> tags:

.myImage {

}

Making an image grayscale

The first step in making a perfectly colorized header is making the image grayscale.

Within the myImage class, we'll start constructing a filter property.

This will make the image grayscale:

.myImage {
    filter: grayscale(100%);
}

More filter options

Now that we have a grayscale image, we must add color using a somewhat dodgy method. Sepia seems to be the only available filter that can add color to a grayscale image.

.myImage {
    filter: grayscale(100%) sepia(100%);
}

Sepia makes the image beige, or very unsaturated orange. Of course, you might not want to make the image orange, so use the hue-rotate filter.

The hue-rotate filter is odd; it won't take a color, but rather it will take a rotation of the RGB color wheel (different from the one you learned in art class) in degrees or radians. Here are the primary and secondary colors in rotations from orange:

• Yellow: 15deg

• Green: 90deg

• Blue: 180deg

• Violet: 225deg

• Red: 315deg

• A better orange: 350deg

In this case, I'd like to make the image violet, but you can add any of these rotations, so I'll add a 225 degree rotation.

.myImage {
    filter: grayscale(100%) sepia(100%) hue-rotate(225deg);
}

So the image now looks much different, but it doesn't look violet enough - it looks gray with a violet tint. This is the final step; you need to turn up the saturation. Choose how much wisely, though. I've found that 600% is too high and 200% is too low, but otherwise it's your choice of how much to saturate. Use the saturate option:

.myImage {
    filter: grayscale(100%) sepia(100%) hue-rotate(225deg) saturate(500%);
}

Apply this CSS, then create an <img> tag with class=myImage. See the result here.