Creating Contrast using CSS

In photography, adjusting the contrast of an image is often an important part of the post processing routine. Contrast refers to the difference between light and dark in an image. In the color spectrum of an image the darkest color possible is black and the lightest color is white. A high contrast image is one that displays a large number of tones between these two extremes. Conversely a low contrast image is one that does not have too much variation between it’s light and dark tones. Images with high contrast tend to be colorful and vibrant whereas images with low contrast tend to be dull and dimmed down.

When speaking of image contrasts another topic that frequently comes up is adjusting the brightness of an image. Modifying the brightness is another way to alter the tones in an image to achieve a specific look. It is possible to adjust the contrast and brightness of an image in CSS. This is done through the filter property. The filter property allows for a range of alterations to be made to images. Two values of the filter property are contrast( ) and brightness( ). Below are examples of how each works.

This is the original image to which we will be applying the contrast and brightness filters.

See the Pen xRexdM by Remi D (@Remi7497) on CodePen.

Contrast

The syntax for contrast is filter: contrast(value); Contrast takes percentage values between 0% to over 100%. A value of 100% results in no change to the image. Values less than 100% reduce the contrast of the image, whereas values greater than 100% increase the contrast of the image. Decimal values are also acceptable as input values. Below are a few examples of applying various contrasts to the image. As you can see at 70% the image is dimmer than the original image. As the contrast is increased the shadows get darker while the highlight tones of the image get brighter.

contrast(70%)                                        contrast(120%)

contrast(150% )                                       contrast(250%)

Brightness

The syntax for adjusting brightness is filter: brightness(value); Brightness like contrast takes percentage values ranging from 0% to above 100%. A value of 100% keeps the original image. Any value less than 100% dims the image, with a value of 0% resulting in a completely black image. Values over 100% increases the brightness of the image. Below is the image at four different brightness levels.

brightness(80%)                                       brightness(130%)

brightness(180%)                                   brightness(250%)

Conclusion

Images are a great way to enhance webpage content and communicate more effectively with users.  The CSS filter property can be used to create bright high contrasted images or dim low contrasted images quickly and easily.