SVG filters

Summary

CSS custom filters go way beyond the image-processing capabilities of CSS’s pre-defined filter effects, allowing you to bend, fold, spindle, and mutilate otherwise flat web content.

Filters: a review

Custom filter terminology

Vertex filters

Fragment filters

custom() function syntax

Coding the custom vertex filter

Coding the custom fragment filter

…

See also

Related articles

Filters

• blur()

• brightness()

• contrast()

• custom()

• drop-shadow()

• grayscale()

• hue-rotate()

• invert()

• opacity()

• saturate()

• sepia()

• filter

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

• feDistantLight

• feFlood

• feFuncA

• feFuncB

• feFuncG

• feFuncR

• feGaussianBlur

• feImage

• feMerge

• feMergeNode

• feMorphology

• feOffset

• fePointLight

• feSpecularLighting

• feSpotlight

• feTile

• feTurbulence

• SVG deployment

• SVG filters

• SVG graphic effects

• SVG grand tour

• SVG filters

External resources

• Filter Effects 1.0
• Introducing CSS shaders: Cinematic effects for the web
• WebGL & Custom Filters