Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

filter

The CSS filter property is used to apply one or more filter effects to the selected elements. Separate each filter function with a space to apply multiple effects to the selected elements, they will take effect in the order they are written.

CSS Syntaxfilter: grayscale(100%);
JavaScript Syntaxelement.style.filter = "grayscale(100%)";

Value

none - no filter effects are applied. blur() - apply blur diameter using a length value. brightness() - apply brightness ranging from 0% - 100%(or 0.0 - 1.0). Over 100% applies more brightness. contrast() - apply contrast ranging from 0% - 100%(or 0.0 - 1.0). Over 100% applies more contrast. drop-shadow() - apply drop shadow. Shadow settings are the same as box-shadow settings. grayscale() - apply grayscale ranging from 0% - 100%(or 0.0 - 1.0). hue-rotate() - apply hue rotation ranging from 0deg - 360deg. invert() - apply color invert ranging from 0% - 100%(or 0.0 - 1.0). opacity() - set opacity ranging from 0% - 100%(or 0.0 - 1.0). saturate() - apply color saturation ranging from 0% - 100%(or 0.0 - 1.0). Over 100% applies more saturation. sepia() - apply sepia tone ranging from 0% - 100%(or 0.0 - 1.0). url - set a reference to a filter element.


Initial value: none Used on: all elements Animatable: yes see animatable properties CSS level: 3 Web standard: not yet what's this?

CSS Code Example

<style> #pic1{ filter: blur(5px) grayscale(100%); } #pic2{ filter: brightness(50%); } #pic3{ filter: contrast(125%); } #pic4{ filter: drop-shadow(2px 2px 1px #000); } #pic5{ filter: grayscale(100%); } #pic6{ filter: hue-rotate(180deg); } #pic7{ filter: invert(100%); } #pic8{ filter: opacity(.5); } #pic9{ filter: saturate(2); } #pic10{ filter: sepia(100%); } </style> Add the -webkit- prefix for the time being to test in Chrome, Opera and Safari. -webkit-filter: blur(5px); Transition the filter effects to animate them. <style> #div1{ filter: brightness(40%); display:inline-block; background: #FFC6C6; padding: 50px; transition: filter 0.5s linear 0s; } #div1:hover{ filter: brightness(100%); } </style> <div id="div1">Div 1 content ...</div>

Official Documentation

http://www.w3.org/TR/filter-effects/#propdef-filter

CSS

Properties

align contentalign itemsalign selfalignment adjustalignment baselineallanimationanimation delayanimation directionanimation durationanimation fill modeanimation iteration countanimation nameanimation play stateanimation timing functionazimuthbackface visibilitybackgroundbackground attachmentbackground blend modebackground clipbackground colorbackground imagebackground originbackground positionbackground repeatbackground sizebaseline shiftbookmark labelbookmark levelbookmark stateborderborder bottomborder bottom colorborder bottom left radiusborder bottom right radiusborder bottom styleborder bottom widthborder collapseborder colorborder imageborder image outsetborder image repeatborder image sliceborder image sourceborder image widthborder leftborder left colorborder left styleborder left widthborder radiusborder rightborder right colorborder right styleborder right widthborder spacingborder styleborder topborder top colorborder top left radiusborder top right radiusborder top styleborder top widthborder widthbottombox decoration breakbox shadowbox sizingbox snapbox suppressbreak afterbreak beforebreak insidecaption sidecaret colorchainsclearclipclip pathclip rulecolorcolor interpolation filterscolumn countcolumn fillcolumn gapcolumn rulecolumn rule colorcolumn rule stylecolumn rule widthcolumn spancolumn widthcolumnscontentcounter incrementcounter resetcounter setcropcuecue aftercue beforecursordirectiondisplaydisplay insidedisplay listdisplay outsidedominant baselinedrop initial after adjustdrop initial after aligndrop initial before adjustdrop initial before aligndrop initial sizedrop initial valueelevationempty cellsfilterflexflex basisflex directionflex flowflex growflex shrinkflex wrapfloatflood colorflood opacityflow fromflow intofontfont familyfont feature settingsfont kerningfont language overridefont sizefont size adjustfont stretchfont stylefont synthesisfont variantfont variant alternatesfont variant capsfont variant east asianfont variant ligaturesfont variant numericfont variant positionfont weightfootnote displayfootnote policygridgrid areagrid auto columnsgrid auto flowgrid auto rowsgrid columngrid column endgrid column startgrid rowgrid row endgrid row startgrid templategrid template areasgrid template columnsgrid template rowshanging punctuationheighthyphensimage orientationimage resolutioninitial letterinitial letter aligninline box alignisolationjustify contentjustify itemsjustify selfleftletter spacinglighting colorline breakline gridline heightline snapline stackingline stacking rubyline stacking shiftline stacking strategylist stylelist style imagelist style positionlist style typemarginmargin bottommargin leftmargin rightmargin topmarker sidemarquee directionmarquee loopmarquee speedmarquee stylemaskmask bordermask border modemask border outsetmask border repeatmask border slicemask border sourcemask border widthmask clipmask compositemask imagemask modemask originmask positionmask repeatmask sizemask typemax heightmax linesmax widthmax zoommin heightmin widthmin zoommix blend modemove tonav downnav leftnav rightnav upobject fitobject positionoffset afteroffset beforeoffset endoffset startopacityorderorientationorphansoutlineoutline coloroutline offsetoutline styleoutline widthoverflowoverflow styleoverflow wrapoverflow xoverflow ypaddingpadding bottompadding leftpadding rightpadding toppagepage break afterpage break beforepage break insidepage policypausepause afterpause beforeperspectiveperspective originpitchpitch rangeplay duringpositionpresentation levelquotesregion fragmentresizeresolutionrestrest afterrest beforerichnessrightrotationrotation pointruby alignruby mergeruby positionrunningshape image thresholdshape marginshape outsidesizespeakspeak asspeak headerspeak numeralspeak punctuationspeech ratestressstring settab sizetable layouttext aligntext align lasttext combine uprighttext decorationtext decoration colortext decoration linetext decoration skiptext decoration styletext emphasistext emphasis colortext emphasis positiontext emphasis styletext heighttext indenttext justifytext orientationtext overflowtext shadowtext transformtext underline positiontoptransformtransform origintransform styletransitiontransition delaytransition durationtransition propertytransition timing functionunicode bidiuser zoomvertical alignvisibilityvoice balancevoice durationvoice familyvoice pitchvoice rangevoice ratevoice stressvoice volumevolumewhite spacewidowswidthwill changeword breakword spacingword wrapwrap flowwrap throughwriting modez indexzoom