CSS Filter Property

CSS Filter Property
Nikhil
Published on 2021-07-08 17:12:25

CSS Filter Property Value and Description


  • blur(x) Blurs the image by x pixels.
  • brightness(x) Brightens the image at any value above 1.0 or 100%. Below that, the image will be darkened.
  • contrast(x) Provides more contrast to the image at any value above 1.0 or 100%. Below that, the image will get less saturated.
  • drop-shadow(h, v, x, y, z) Gives the image a drop-shadow. h and v can have negative values. x, y, and z are optional.
  • greyscale(x) Shows the image in greyscale, with a maximum value of 1.0 or 100%.
  • hue-rotate(x) Applies a hue-rotation to the image.
  • invert(x) Inverts the color of the image with a maximum value of 1.0 or 100%.
  • opacity(x) Sets how opaque/transparent the image is with a maximum value of 1.0 or 100%.
  • saturate(x) Saturates the image at any value above 1.0 or 100%. Below that, the image will start to de-saturate.
  • sepia(x) Converts the image to sepia with a maximum value of 1.0 or 100%.

 

Blur


HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
-webkit-filter: blur(1px);
filter: blur(1px);
}

Result

Makes you wanna rub your glasses.

 

Drop Shadow (use box-shadow instead if possible)


HTML

<p>My shadow always follows me.</p>

CSS

p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}

 

Hue Rotate


HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}

Result:

 

Multiple Filter Values


To use multiple filters, separate each value with a space.

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}

Result:

 

Invert Color


HTML

<div></div>

CSS

div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}

Result:

Turns from white to black.

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website