עברית
accent-coloralignalignment-baselineallanchoranimationappearanceaspect-ratiobackdrop-filterbackface-visibilitybackgroundbaselineblock-sizeborderbottomboxbreakcaption-sidecaretclearclipcolorcolumncolumnscontaincontainercontentcornercountercursorcxcyddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfillfilterflexfloatfloodfontforced-color-adjustgapgridheighthyphenatehyphensimageime-modeinitial-letterinline-sizeinsetinteractivityinterestinterpolate-sizeisolationjustifyleftletter-spacinglighting-colorlinelistmarginmarkermaskmathmaxminmix-blend-modeobjectoffsetopacityorderorphansoutlineoverflowoverlayoverscrollpaddingpagepaint-orderperspectiveplacepointer-eventspositionprint-color-adjustquotesrreadingresizerightrotaterowrubyrulerxryscalescrollscrollbarshapespeakstopstroketab-sizetable-layouttexttimelinetoptouch-actiontransformtransitiontranslatetrigger-scopeunicode-bidiuser-selectvector-effectvertical-alignviewvisibilitywhitewidowswidthwill-changewordwriting-modexyz-indexzoom
The CSS Propertie filter
The filter property applies graphical effects to an element — blur, brightness, contrast adjustments, hue rotation, grayscale, drop shadow, etc. Multiple filter functions can be chained, or a url() can reference an SVG filter element.
.photo {
filter: blur(4px);
}
.vintage {
filter: sepia(60%) contrast(110%) brightness(95%) drop-shadow(2px 4px 8px rgba(0,0,0,0.3));
}
noneNo filter effect applied (default).
blur()Applies Gaussian blur. Syntax: blur() — e.g. blur(4px).brightness()Linear multiplier of brightness. 0% = black, 100% = unchanged. Syntax: brightness( | ).contrast()Adjusts contrast. 0% = uniform gray, 100% = unchanged. Syntax: contrast( | ).drop-shadow()Applies a drop shadow. Syntax: drop-shadow( ? ?).grayscale()Converts to grayscale. 100% = fully black-and-white. Syntax: grayscale( | ).hue-rotate()Rotates hue on the color wheel. Syntax: hue-rotate() — e.g. hue-rotate(90deg).invert()Inverts colors. 100% = fully inverted, 0% = unchanged. Syntax: invert( | ).opacity()Applies transparency. 0% = fully transparent, 100% = opaque. Syntax: opacity( | ).saturate()Adjusts saturation. 0% = grayscale, 100% = unchanged, >100% = supersaturated. Syntax: saturate( | ).sepia()Converts to sepia tone. 100% = full sepia, 0% = unchanged. Syntax: sepia( | ).url()References an SVG filter element (external or inline). Example: url(#myFilter).
Filter Effects Module Level 1
Editor's Draft
W3CMDN
Show all code
Edit CSS online
The plugin that remembers hundreds of CSS items for you
Every CSS property — in a live demonstration
The bilingual CSS reference
previousnext