Filters

Filters are a great way of graphically modifying an element. You can blur an image, make an image grey-scale or change its brightness. This is an interactive playground on all of the possible filter functions that can be used.

Note: The interactive widgets in this playground may be laggy due to the computation required to apply filter to elements.

Below, you can choose from a few images I’ve chosen.

Background Image

.image {
    background-image: url(http://i0.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg);
}

Image Url

Blur

blur() applies a Gaussian blur to the element. The length used determines the radius of the blur.

Filter

.image {
    filter: blur(0px);
}

Amount

Type

Brightness

brightness() modifies the brightness of the image. A value of 0.4 is equivalent to 40%.

Filter

.image {
    filter: brightness(0%);
}

Amount

Contrast

contrast() changes the contrast of the image. This will typically change the color of the element. A value of 0.4 is equivalent to 40%.

Filter

.image {
    filter: contrast(0%);
}

Amount

Drop Shadow

drop-shadow() applies a drop shadow onto the element. This is very similar to `box-shadow. I’ve chosen not to include the spread-radius value because some browsers will not render the shadow if there is a spread radius. Read more about it here.

Filter

.image {
    filter: drop-shadow(10px 10px 10px #194d33);
}

Offset X

Offset Y

Blur Radius

Color

Grayscale

grayscale() converts an image to grayscale. It basically turns the image black and white. Values between 0 to 100% are valid values. A value of 0.4 is equivalent to 40%.

Filter

.image {
    filter: grayscale(0%);
}

Amount

Hue Rotate

hue-rotate() rotates the hue of the element. You can pass hue-rotate any normal angle value like 45deg or 3.14rad.

Filter

.image {
    filter: hue-rotate(0deg);
}

Amount

Type

Invert

invert() will invert the color within the element. A value of 0% produces an unchanged color and a value of 100% produces a completely inverted color. A value of 0.3 is equivalent to 30%.

Filter

.image {
    filter: invert(0%);
}

Invert

Opacity

opacity() changes how opaque or transparent the image is. A value of 0% produces an invisible element and a value of 100% produces a visible element. A value of 0.3 is equivalent to 30%.

Filter

.image {
    filter: opacity(0%);
}

Opacity

Saturate

saturate() changes the saturation (amount of color). A value of 0.3 is equivalent to 30%.

Filter

.image {
    filter: saturate(0%);
}

Saturation

Sepia

sepia() turns the image into a sepia color (reddish-brown). A value of 0.3 is equivalent to 30%.

Filter

.image {
    filter: sepia(0%);
}

Amount

Multiple filters

You can also apply multiple filters at the same time by adding multiple filter functions.

Filter

.image {
    filter: blur(0px) invert(0%);
}

Blur

Contrast

Conclusion

Filters are a great way apply image changes in browser without having to change the source image. If you’re interested in real documentation on filters, here is a link to the MDN documentation.

Hopefully this is a good tool for anyone curious about CSS filters. If you found this useful, feel free to share it with others.