Learn the basics of CSS Filters

We never thought we could so easily kick up the visuals of our documents. Well now we can! CSS Filters are really cool visual effects, and the most fun part of CSS.

Now, without trying our hands at Photoshop or any other editing tool, we can give the same effects to our images using the CSS Filters.

filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

The Blur Effect - The blur effect can be applied to an element using the blur() function. This function accepts CSS length value as a parameter which defines the blur radius. A larger value will create more blur. If no parameter is provided, then a value 0 is used.

.image-1 {
  -webkit-filter: blur(0|2px|5px); 
  filter: blur(0|2px|5px);
}

Image Brightness - The brightness() function can be used to set the brightness of an image. A value of 0% will create an image that is completely black. A value greater than 100% completely brightens the image while 100% or 1 leaves the image unchanged. Negative values are not allowed as a parameter to this function.

.image-1 {
  -webkit-filter: brightness(50%|100%|200%); 
  filter: brightness(50%|100%|200%);
}

Image Contrast - The contrast() function is used to adjust the contrast on an image. A value of 0% will create an image that is completely black. A value greater than 100% completely brightens the image while 100% or 1 leaves the image unchanged.

.image-1 {
  -webkit-filter: contrast(50%|100%|200%); 
  filter: contrast(50%|100%|200%);
}

Opacity - The opacity() function applies transparency to an image. Values between 0% and 100% are linear multipliers on the effect. The opacity filter effect is measured by the level of range from completely transparent to completely opaque.

.image-1 {
  -webkit-filter: opacity(10%|40%|80%); 
  filter: opacity(10%|40%|80%);
}

The Sepia Effect - The sepia filter effect is a brownish-grey to dark yellowish-brown tone imparted to an element and is expressed in percentages from 0% to 100%.

.image-1 {
  -webkit-filter: sepia(10%|40%|80%); 
  filter: sepia(10%|40%|80%);
}

Drop Shadow - This adds to a shadow to the image and is similar to what box-shadow does.

.image-1{
  drop-shadow(0);
}

.image-2 {
  -webkit-filter: drop-shadow(4px 4px 10px yellow);
  filter: drop-shadow(4px 4px 10px yellow);
}

.image-3 {
  -webkit-filter: drop-shadow(8px 8px 12px yellow);
  filter: drop-shadow(8px 8px 12px yellow);
}

Grayscale - The grayscale() CSS function converts the input image to grayscale. Values between 0% and 100% are linear multipliers on the effect.

.image-1 {
  -webkit-filter: grayscale(50%|100%|200%); 
  filter: grayscale(50%|100%|200%);
}

Hue Rotation - The CSS hue-rotate() function is used with the filter property to apply a hue rotation an image. A hue rotation is where you specify an angle around the color circle that the input samples will be adjusted by.

The CSS hue-rotate() function requires an argument to tell it how much to rotate the hue by.

.image-1 {
  -webkit-filter: hue-rotate(0|100deg|250deg); 
  filter: hue-rotate(0|100deg|250deg);
}

The Invert Effect - The invert() CSS function inverts the color samples in the input image. 0% (0) is the default and represents the original image. 100% will make the image completely inverted. Negative values are not allowed.

.image-1 {
  -webkit-filter: invert(0|40%|80%); 
  filter: invert(0|40%|80%);
}

Saturate - The saturate filter is used to vary the intensity of color in the element. A saturated element has overly bright colors; you can increase saturation on under-exposed images or vice versa. The amount of saturation can be expressed in percentages, where a value of 0% is completely un-saturated, and a value of 100% leaves the input unchanged.

.image-1 {
  -webkit-filter: saturate(10%|150%|350%); 
  filter: saturate(10%|150%|350%);
}

The CSS filters show the evolution of effects from SVG format and how effective they are. They make the images look more impactful with minimum efforts. Each filter has an essential purpose to apply the effect to a graphics element or container element

Current browser and user agent support can be found from the @_"Can I use..." table for CSS3 Filter Effects;

This article was written by Megha Sachdev who is an Apprentice at This Dot.

You can follow her on Twitter at @_megsachdev.

Need JavaScript consulting, mentoring, or training help? Check out our list of services at This Dot Labs.