You can use CSS3 to add blur, shadow, brightness or contrast to an element. Overall, there are ten filters available. The SVG format knows filter effects as well. Partially, these options overlap, for example when it comes to blur. However, the SVG format knows several additional filters that CSS3 alone can’t create. With little effort, you can add SVG Filters to an HTML element. What SVG Filters Exist? While CSS3 has a total of ten different filters, the SVG format offers 19 of them. For example, there’s “<feConvolveMatrix>”, which mixes pixels on an image with adjacent pixels. This creates a smudgy effect similar to the motion blur in Photoshop. Using “<feGaussianBlur>” allows you to apply a Gaussian blur, while “<feMorphology>” makes sure that the pixels of an image are thinned or thickened. Original Image and the Applied “<feMorphology>” Filter You can use the filter “<feColorMatrix>” for different color manipulations, for example to alter an image’s saturation, hue, and brightness. The two filters “<feDiffuseLighting>” and “<feSpecularLighting>” allow you to add lighting effects like diffused or reflected light to a picture. With “<feDistantLight>”, “<fePointLight>” or “<feSpotLight>”, you can define different light sources. Image With Lighting Filter There are several other filters, some […]* You might also be interested in the following articlesCSSgram: Instagram Image Effects in Plain CSSFilter Forge 4: More Than 10,000 Filters for Photoshop Aficionados…Better than Pure CSS3: Realistic and Complex Shadows with Shine.jsHowTo: Build (Sort of) an Instagram Clone with HTML5Firefox Developer Edition: The Browser for DevelopersText Effects With SVG: Patterns, Masks and Clipping Paths
