HTML CSS - CSS Filters

Using CSS filters for visual effects

CSS filters allow you to apply various visual effects to images and other elements. This tutorial covers advanced techniques for using CSS filters, including grayscale, sepia, blur, brightness, contrast, hue-rotate, invert, saturate, and drop-shadow effects.

Grayscale

The grayscale filter converts an image to shades of gray. Here is an example:

.grayscale {
    filter: grayscale(100%);
}
            

Sepia

The sepia filter gives an image a warm, brownish tone, reminiscent of old photographs. Here is an example:

.sepia {
    filter: sepia(100%);
}
            

Blur

The blur filter applies a Gaussian blur to the image. Here is an example:

.blur {
    filter: blur(5px);
}
            

Brightness

The brightness filter adjusts the brightness of the image. Here is an example:

.brightness {
    filter: brightness(150%);
}
            

Contrast

The contrast filter adjusts the contrast of the image. Here is an example:

.contrast {
    filter: contrast(200%);
}
            

Hue Rotate

The hue-rotate filter applies a hue rotation to the image. Here is an example:

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

Invert

The invert filter inverts the colors of the image. Here is an example:

.invert {
    filter: invert(100%);
}
            

Saturate

The saturate filter adjusts the saturation of the image. Here is an example:

.saturate {
    filter: saturate(300%);
}
            

Drop Shadow

The drop-shadow filter applies a drop shadow effect to the image. Here is an example:

.drop-shadow {
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}
            

Combining Filters

You can combine multiple filters to create complex visual effects. Here is an example:

.combined-filters {
    filter: grayscale(50%) brightness(150%) contrast(200%);
}
            

Summary

In this tutorial, you learned how to use CSS filters to apply various visual effects to images and other elements. You explored using filters such as grayscale, sepia, blur, brightness, contrast, hue-rotate, invert, saturate, and drop-shadow. Understanding and applying these techniques will enable you to create dynamic and engaging visual effects, enhancing the visual appeal of your web designs.