CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Image Filters

Parrot
Parrot
Parrot
Parrot

CSS introduced filter effects that you can use to perform visual effect operations like blur, balancing contrast or brightness, color saturation etc, on graphical elements like an image before it is drawn onto the web page.

The filter effects can be applied to the element using the CSS filter property.

We have the following CSS filter functions:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

The Blur Effect

The blur() CSS function applies a Gaussian blur to the image.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

This function accepts CSS length value as parameter which defines the blur radius. A larger value will create more blur.

Run code

Setting Image Brightness

The brightness() CSS function applies a linear multiplier to the image, making it appear brighter or darker.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

A value of 0% will make the image completely black. 100% or 1 is default and represents the original image. Values over 100% will provide brighter results.

Run code

Adjusting the Image Contrast

The contrast() CSS function adjusts the contrast of the image.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

A value of 0% will make the image completely black. 100% or 1 is default and represents the original image. Values over 100% will provide less contrast.

Run code

Adding Drop Shadow to Images

The drop-shadow() CSS function applies a drop shadow effect to the image.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

The first and second parameters of the drop-shadow() function specifies the horizontal and vertical offset of the shadow respectively, whereas the third parameter specify the blur radius and the last parameter specifies the shadow color.

Run code

This function is similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.


Converting an Image to Grayscale

The grayscale() CSS function converts the image to grayscale.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

A value of 0% represents the original image (This is default). 100% will make the image completely gray (used for black and white images).

Run code

Applying Hue Rotation on Image

The hue-rotate() CSS function applies a hue rotation on the image.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

The value defines the number of degrees around the color circle the image samples will be adjusted.

A value of 0deg leaves the image unchanged (This is default). A positive hue rotation increases the hue value, while a negative rotation decreases the hue value.

Run code

The Invert Effect

The invert() CSS function inverts the color samples in the image.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

A value of 0% represents the original image (This is default). 100% will make the image completely inverted.

Run code

Adding Opacity to Images

The opacity() CSS function applies transparency to the samples in the image.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

A value of 0% is completely transparent. 100% or 1 is default and represents the original image (no transparency).

Run code

This function is similar to the opacity property. The difference is that with filters, some browsers provide hardware acceleration for better performance.


Applying Sepia Effect

The sepia() CSS function converts the image to sepia, giving it a warmer, more yellow/brown appearance.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

A value of 0% represents the original image (This is default). 100% will make the image completely sepia.

Run code

Adjusting the Saturation of Images

The saturate() CSS function super-saturates or de-saturates the image.

Parrot-Tutorial
Parrot-Tutorial
Parrot-Tutorial

A value of 0% will make the image completely un-saturated. 100% is default and represents the original image. Values over 100% provides super-saturated results.

Run code

CSS Filter Functions

Note: The filters that use percentage values (i.e. 45%), also accept the value as decimal (i.e. 0.45).

Filter Description
none Specifies no effects (This is default)
blur(px) Applies a blur effect to the image. A larger value will create more blur
brightness(%)
Applies a linear multiplier to the image, making it appear brighter or darker
0% or (0) will make the image completely black
100% or (1) represents the original image (This is default)
Values over 100% will provide brighter results
contrast(%)
Adjusts the contrast of the image
0% or (0) will make the image completely black
100% or (1) represents the original image (This is default)
Values over 100% will provide less contrast
drop-shadow(h-shadow v-shadow blur color)
Applies a drop shadow effect to the image
First parameter specifies the horizontal shadow. Negative values place the shadow to the left of the image.
Second parameter specifies the vertical shadow. Negative values place the shadow above the image.
Third parameter specifies the blur radius
Last parameter specifies the shadow color
grayscale(%)
Converts the image to grayscale
0% represents the original image (This is default)
100% will make the image completely gray (used for black and white images)
hue-rotate(deg)
Applies a hue rotation on the image
0deg leaves the image unchanged (This is default)
A positive hue rotation increases the hue value
A negative rotation decreases the hue value
invert(%)
Inverts the color samples in the image
0% represents the original image (This is default)
100% will make the image completely inverted
opacity(%)
Applies transparency to the image
0% is completely transparent
100% or 1 is default and represents the original image (no transparency)
saturate(%)
Saturates the image
0% will make the image completely un-saturated
100% represents the original image (This is default)
Values over 100% provides super-saturated results
sepia(%)
Converts the image to sepia, giving it a warmer, more yellow/brown appearance
0% represents the original image (This is default)
100% will make the image completely sepia