Exploring CSS filter effects

Initially designed to work with SVG, graphical filter effects can be applied to an HTML or SVG element via CSS. They are fun to use and create interesting visual effects.

Let’s take a closer look at each filter function applied to an image (jpg).

List of filter functions:

blur( )

  • applies a gaussian blur
  • value: CSS length
  • no percentage / no negative values allowed
  • default value (when omitted): 0 / input unchanged
  • initial value (for interpolation): 0
    see Browser compatibility
67408996_470086177145297_6371686366426174151_n

no effect, blur(0)

67408996_470086177145297_6371686366426174151_n

blur(5rem)

67408996_470086177145297_6371686366426174151_n

blur(55px)

brightness( )

  • applies a linear multiplier
  • value: number or percentage
  • 0% = completely black / 100% = input unchanged
  • values over 100% are allowed (brighter results)
  • no negative values allowed
  • default value (when omitted): 1
  • initial value (for interpolation): 1
    see Browser compatibility
67408996_470086177145297_6371686366426174151_n

no effect, brightness(0%)

67408996_470086177145297_6371686366426174151_n

brightness(50%)

67408996_470086177145297_6371686366426174151_n

brightness(100%)

contrast( )

  • adjust the contrast of the input
  • value: number or percentage
  • 0% = completely grey / 100% input unchanged
  • values over 100% are allowed (more contrast)
  • no negative values allowed
  • default value (when omitted): 1
  • initial value (for interpolation): 1
    see Browser compatibility
67408996_470086177145297_6371686366426174151_n

no effect, contrast(0%)

67408996_470086177145297_6371686366426174151_n

contrast(50%)

67408996_470086177145297_6371686366426174151_n

contrast(100%)

drop-shadow( )

  • applies drop-shadow effect to the input
  • value: offset-x offset-y blur-radius(optional) color(optional)
  • default value: (when value omitted) missing length: 0 / missing colour: defaults to current colour
  • initial value (for interpolation): all length values = 0; missing colour taken from color property
    see Browser compatibility
67408996_470086177145297_6371686366426174151_n

drop-shadow(10px 5px 2px #4444dd)

67408996_470086177145297_6371686366426174151_n

drop-shadow(20px -18px 4px rgba(0,0,255,0.3))

67408996_470086177145297_6371686366426174151_n

drop-shadow(0 0 0.75rem pink)

grayscale( )

  • Converts the input to grayscale
  • value: number or percentage
  • 0% = input unchanged / 100% = completely grayscale
  • values over 100% are allowed but user agents must clamp the values to 1
  • no negative values allowed
  • default value (when omitted): 1
  • initial value (for interpolation): 0
    see Browser compatibiltiy
67408996_470086177145297_6371686366426174151_n

no effect, grayscale(0)

67408996_470086177145297_6371686366426174151_n

grayscale(.45)

67408996_470086177145297_6371686366426174151_n

grayscale(100%)

hue-rotate( )

  • applies hue rotation to input
  • value: angle (deg)
  • 0deg = input unchanged / +deg increases value / -deg decreases value
  • no minimum or maximum value
  • default value (when omitted): 0deg
  • initial value (for interpolation): 0deg
    see Browser compatibiltiy
67408996_470086177145297_6371686366426174151_n

no effect, hue-rotate(0deg)

67408996_470086177145297_6371686366426174151_n

hue-rotate(-180deg)

67408996_470086177145297_6371686366426174151_n

hue-rotate(250deg)

invert( )

  • invert the input colour
  • value: number or percentage
  • 0% = input unchanged / 100% = completely inverted
  • values over 100% are allowed but user agents must clamp the values to 1
  • no negative values allowed
  • default value (when omitted): 1
  • initial value (for interpolation): 0
    see Browser compatibility
67408996_470086177145297_6371686366426174151_n

no effect, invert(0)

67408996_470086177145297_6371686366426174151_n

invert(0.4) same as 40%

67408996_470086177145297_6371686366426174151_n

invert(100%)

opacity( )

  • Applies transparency to input
  • value: number or percentage
  • 0% = completely transparent / 100% = input unchanged
  • values over 100% are allowed but user agents must clamp the values to 1
  • no negative values allowed
  • default value (when omitted): 1
  • initial value (for interpolation): 1
    see Browser compatibility
67408996_470086177145297_6371686366426174151_n

no effect, Opacity(0)

67408996_470086177145297_6371686366426174151_n

Opacity(0.3) same as 30%

67408996_470086177145297_6371686366426174151_n

Opacity(90%)

saturate( )

  • saturates the input
  • value: number or percentage
  • 0% = completely unsaturated / 100% = input unchanged
  • values over 100% are allowed
  • no negative values allowed
  • default value (when omitted): 1
  • initial value (for interpolation): 1
    see Browser compatibiltiy
67408996_470086177145297_6371686366426174151_n

no effect, saturate(0)

67408996_470086177145297_6371686366426174151_n

saturate(0.9) same as 90%

67408996_470086177145297_6371686366426174151_n

saturate(200%)

sepia( )

  • converts input to sepia
  • value: number or percentage
  • 0% = input unchanged / 100% = completely sepia
  • values over 100% are allowed but user agents must clamp the values to 1
  • no negative values allowed
  • default value (when omitted): 1
  • initial value (for interpolation): 0
    see Browser compatibiltiy
67408996_470086177145297_6371686366426174151_n

no effect, sepia(0)

67408996_470086177145297_6371686366426174151_n

sepia(0.6) same as 60%

67408996_470086177145297_6371686366426174151_n

sepia(100%)

CSS Filter Generators

More Resources